Add loading indicator and no notes message to home view

diff --git a/client/components/LoadingIndicator.vue b/client/components/LoadingIndicator.vue
index 0b8a88bf657b8d708c606513ff3b125fe63673f6..9caa657097a4d0166a2101de5ccad426e3be500e 100644 (file)
--- a/client/components/LoadingIndicator.vue
+++ b/client/components/LoadingIndicator.vue
@@ -7,14 +7,19 @@
     ></div>
 
     <!-- Failed -->
-    <div v-else-if="loadSuccessful === false" class="flex flex-col items-center">
+    <div
+      v-else-if="loadSuccessful === false"
+      class="flex flex-col items-center"
+    >
       <SvgIcon
         type="mdi"
         :path="failedIconPath"
         size="4em"
         class="mb-4 text-theme-brand"
       />
-      <span class="text-lg text-theme-text-muted">{{ failedMessage }}</span>
+      <span class="text-center text-lg text-theme-text-muted max-w-80">{{
+        failedMessage
+      }}</span>
     </div>
 
     <!-- Loaded -->

diff --git a/client/views/Home.vue b/client/views/Home.vue
index f866b98fe2cffe299379f9a0355953ca68eae793..24e602d888a786a90d1f037090f84e95d8df76c0 100644 (file)
--- a/client/views/Home.vue
+++ b/client/views/Home.vue
@@ -3,7 +3,11 @@
     <div class="flex max-w-[500px] flex-1 flex-col items-center">
       <Logo class="mb-5" />
       <SearchInput class="mb-5 shadow-[0_0_20px] shadow-theme-shadow" />
-      <div class="flex min-h-56 flex-col items-center">
+      <LoadingIndicator
+        ref="loadingIndicator"
+        class="flex min-h-56 flex-col items-center"
+        hideLoader
+      >
         <p
           v-if="notes.length > 0"
           class="mb-2 text-xs font-bold text-theme-text-very-muted"
@@ -13,29 +17,44 @@
         <RouterLink v-for="note in notes" :to="note.href" class="mb-1">
           <CustomButton :label="note.title" />
         </RouterLink>
-      </div>
+      </LoadingIndicator>
     </div>
   </div>
 </template>
 
 <script setup>
 import { useToast } from "primevue/usetoast";
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { RouterLink } from "vue-router";
 
-import { getNotes, apiErrorHandler } from "../api.js";
+import { mdiPencil } from "@mdi/js";
+import { apiErrorHandler, getNotes } from "../api.js";
 import CustomButton from "../components/CustomButton.vue";
+import LoadingIndicator from "../components/LoadingIndicator.vue";
 import Logo from "../components/Logo.vue";
 import SearchInput from "../partials/SearchInput.vue";
 
+const loadingIndicator = ref();
+const noNotesMessage =
+  "Click the 'New Note' button at the top of the page to get started.";
 const notes = ref([]);
 const toast = useToast();
 
-getNotes("*", "lastModified", "desc", 5)
-  .then((data) => {
-    notes.value = data;
-  })
-  .catch((error) => {
-    apiErrorHandler(error, toast);
-  });
+function init() {
+  getNotes("*", "lastModified", "desc", 5)
+    .then((data) => {
+      notes.value = data;
+      if (notes.value.length > 0) {
+        loadingIndicator.value.setLoaded();
+      } else {
+        loadingIndicator.value.setFailed(noNotesMessage, mdiPencil);
+      }
+    })
+    .catch((error) => {
+      loadingIndicator.value.setFailed();
+      apiErrorHandler(error, toast);
+    });
+}
+
+onMounted(init);
 </script>