Added rudimentary loading indicators and "No Results" warning

diff --git a/flatnotes/src/components/App.js b/flatnotes/src/components/App.js
index 4d2f725c70186b46e037d0b99da84bf064c82917..8aebd2514207ba2eed86bfb3d2bf05c5ca1b1302 100644 (file)
--- a/flatnotes/src/components/App.js
+++ b/flatnotes/src/components/App.js
@@ -27,7 +27,7 @@ export default {
       usernameInput: null,
       passwordInput: null,
       rememberMeInput: false,
-      notes: [],
+      notes: null,
       searchTerm: null,
       draftSaveTimeout: null,
       searchResults: null,
@@ -42,9 +42,13 @@ export default {
 
   computed: {
     notesByLastModifiedDesc: function() {
-      return this.notes.sort(function(a, b) {
-        return b.lastModified - a.lastModified;
-      });
+      if (this.notes == null) {
+        return null;
+      } else {
+        return this.notes.sort(function(a, b) {
+          return b.lastModified - a.lastModified;
+        });
+      }
     },
   },
 
@@ -127,8 +131,8 @@ export default {
 
     getNotes: function() {
       let parent = this;
-      parent.notes = [];
       api.get("/api/notes").then(function(response) {
+        parent.notes = [];
         response.data.forEach(function(note) {
           parent.notes.push(new Note(note.filename, note.lastModified));
         });

diff --git a/flatnotes/src/components/App.vue b/flatnotes/src/components/App.vue
index 986eba96a5a7f7a614b662d6fbb32587ef9d68af..c0e97463f252bed581c14c28b3493c1efc1e3bac 100644 (file)
--- a/flatnotes/src/components/App.vue
+++ b/flatnotes/src/components/App.vue
@@ -136,35 +136,53 @@
       </form>
 
       <!-- Note -->
-      <div v-if="currentView == views.note && currentNote != null" class="mb-4">
-        <!-- Viewer -->
-        <div v-if="editMode == false">
-          <viewer
-            :initialValue="currentNote.content"
-            height="600px"
-            :options="viewerOptions"
-          />
+      <div v-if="currentView == views.note">
+        <!-- Loading -->
+        <div v-if="currentNote == null">
+          <p class="text-center">Loading...</p>
         </div>
 
-        <!-- Editor -->
-        <div v-else>
-          <input type="text" class="form-control" v-model="titleInput" />
-          <editor
-            :initialValue="initialContent"
-            initialEditType="markdown"
-            previewStyle="tab"
-            height="calc(100vh - 180px)"
-            ref="toastUiEditor"
-            :options="editorOptions"
-            @change="startDraftSaveTimeout"
-          />
+        <!-- Note Loaded -->
+        <div v-else class="mb-4">
+          <!-- Viewer -->
+          <div v-if="editMode == false">
+            <viewer
+              :initialValue="currentNote.content"
+              height="600px"
+              :options="viewerOptions"
+            />
+          </div>
+
+          <!-- Editor -->
+          <div v-else>
+            <input type="text" class="form-control" v-model="titleInput" />
+            <editor
+              :initialValue="initialContent"
+              initialEditType="markdown"
+              previewStyle="tab"
+              height="calc(100vh - 180px)"
+              ref="toastUiEditor"
+              :options="editorOptions"
+              @change="startDraftSaveTimeout"
+            />
+          </div>
         </div>
       </div>
 
       <!-- Search -->
       <div v-if="currentView == views.search">
-        <!-- Search Results -->
-        <div v-if="searchResults">
+        <!-- Searching -->
+        <div v-if="searchResults == null">
+          <p class="text-center">Searching...</p>
+        </div>
+
+        <!-- No Results -->
+        <div v-else-if="searchResults.length == 0">
+          <p class="text-center">No Results</p>
+        </div>
+
+        <!-- Search Results Loaded -->
+        <div v-else>
           <div
             v-for="result in searchResults"
             :key="result.filename"
@@ -183,13 +201,26 @@
 
       <!-- Home -->
       <div v-if="currentView == views.home">
-        <p
-          v-for="note in notesByLastModifiedDesc"
-          class="text-center clickable-link mb-2"
-          :key="note.filename"
-        >
-          <a :href="note.href">{{ note.title }}</a>
-        </p>
+        <!-- Loading -->
+        <div v-if="notes == null">
+          <p class="text-center">Loading...</p>
+        </div>
+
+        <!-- No Notes -->
+        <div v-else-if="notes.length == 0">
+          <p class="text-center">No Notes</p>
+        </div>
+
+        <!-- Notes Loaded -->
+        <div v-else>
+          <p
+            v-for="note in notesByLastModifiedDesc"
+            class="text-center clickable-link mb-2"
+            :key="note.filename"
+          >
+            <a :href="note.href">{{ note.title }}</a>
+          </p>
+        </div>
       </div>
     </div>
   </div>