show loading icon and "No search result for ..."

css/notes.css

@@ -43,6 +43,15 @@
 	opacity: .57;
 }
 
+#app-navigation li .nav-entry .emptycontent-search {
+	white-space: normal;
+}
+@media (max-height: 600px) {
+	#app-navigation li .nav-entry .emptycontent-search {
+		margin-top: inherit;
+	}
+}
+
 #app-navigation li:hover .nav-entry,
 #app-navigation li:focus .nav-entry {
 	opacity: 1;

js/app/controllers/appcontroller.js

@@ -16,7 +16,7 @@ app.controller('AppController', function ($scope, $location, is) {
         if(lastViewedNote !== 0) {
             $location.path('/notes/' + lastViewedNote);
         }
-        if(errorMessage !== 0) {
+        if(errorMessage) {
             OC.Notification.showTemporary(errorMessage);
         }
         if(useSearchAPI) {

js/app/controllers/notescontroller.js

@@ -11,6 +11,7 @@ app.controller('NotesController', function($routeParams, $scope, $location,
     'use strict';
 
     $scope.route = $routeParams;
+    $scope.notesLoaded = false;
     $scope.notes = NotesModel.getAll();
 
     var notesResource = Restangular.all('notes');
@@ -18,6 +19,7 @@ app.controller('NotesController', function($routeParams, $scope, $location,
     // initial request for getting all notes
     notesResource.getList().then(function (notes) {
         NotesModel.addAll(notes);
+        $scope.notesLoaded = true;
     });
 
     $scope.create = function () {

templates/main.php

@@ -32,7 +32,7 @@ style('notes', [
         <?php print_unescaped($this->inc('note')); ?>
     </script>
 
-    <div id="app-navigation" ng-controller="NotesController">
+    <div id="app-navigation" ng-controller="NotesController" ng-class="{'loading': !notesLoaded}">
         <ul>
 <?php if(!$_['useSearchAPI']) { ?>
             <li class="note-search">
@@ -69,10 +69,14 @@ style('notes', [
                         ng-class="{'icon-starred': note.favorite}"></button>
                 </span>
             </li>
-            <li ng-hide="filteredNotes.length">
-                <span class="nav-entry">
-                    <?php p($l->t('No notes found')); ?>
+            <li ng-show="notesLoaded && !filteredNotes.length">
+                <span class="nav-entry" ng-show="search">
+                    <div id="emptycontent" class="emptycontent-search">
+                        <div class="icon-search"></div>
+                        <h2 class="ng-binding"><?php p($l->t('No search result for {{search}}')); ?></h2>
+                    </div>
                 </span>
+                <span class="nav-entry" ng-show="!search"><?php p($l->t('No notes found')); ?></span>
             </li>
 
         </ul>