From 6a53d9fd58f1004462514d9802422d6fbca270ce Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Mon, 22 May 2023 20:56:54 +0200
Subject: [PATCH] improve loading

---
 src/App.vue                |  8 +++++---
 src/components/SideBar.vue | 11 ++++++-----
 src/components/TopBar.vue  |  4 +++-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 30168f0..13015a3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { activeNote, updateNote } from '@/composables/useNotes'
+import { activeNote, updateNote, notes } from '@/composables/useNotes'
 import { viewModes, activeViewMode } from '@/composables/useViewMode'
 import { windowIsMobile } from '@/utils/helpers'
-import { initialized } from '@/composables/useFirebase'
 import firebase from 'firebase/compat/app'
 import * as firebaseui from 'firebaseui'
 
@@ -15,6 +14,9 @@ const sideBarCollapsed = ref<boolean>(windowIsMobile())
 const firebaseAuthUI =
   firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
 provide('firebaseAuthUI', firebaseAuthUI)
+
+const loading = computed(() => notes.value.length === 0)
+provide('loading', loading)
 </script>
 
 <template>
@@ -34,7 +36,7 @@ provide('firebaseAuthUI', firebaseAuthUI)
       class="transition[margin-left] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
       :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar max-sm:hidden'"
     >
-      <template v-if="initialized">
+      <template v-if="!loading">
         <Note
           v-if="activeViewMode.name === 'Note' && activeNote"
           :key="activeNote.id"
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index bfb0035..4bddf66 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { rootNote, notes, setActiveNote as baseSetActiveNote } from '@/composables/useNotes'
 import { windowIsMobile } from '@/utils/helpers'
-import { initialized } from '@/composables/useFirebase'
-import { activeViewMode } from '@/composables/useViewMode';
+import { activeViewMode } from '@/composables/useViewMode'
+
+const loading = inject<boolean>('loading')
 
 const props = defineProps<{
   viewModes: ViewMode[]
@@ -36,7 +37,7 @@ const setViewMode = (viewMode: ViewMode) => {
           icon="fas fa-fw fa-home"
           @click="setActiveNote(rootNote?.id)"
           :title="rootNote?.title"
-          v-if="initialized"
+          v-if="!loading"
         >
           {{ rootNote?.title }}
         </SideBarMenuItem>
@@ -46,7 +47,7 @@ const setViewMode = (viewMode: ViewMode) => {
     <SideBarMenu>
       <template #header>View mode</template>
       <template #items>
-        <template v-if="initialized">
+        <template v-if="!loading">
           <SideBarMenuItem
             v-for="viewMode in props.viewModes"
             :key="viewMode.name"
@@ -66,7 +67,7 @@ const setViewMode = (viewMode: ViewMode) => {
         Recent notes
       </template>
       <template #items>
-        <template v-if="initialized">
+        <template v-if="!loading">
           <SideBarMenuItem
             v-for="note in notes.slice(-10)"
             :key="note.id"
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 12adb70..08913b5 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -3,6 +3,8 @@ import { addNote, setActiveNote, rootNote } from '@/composables/useNotes'
 import { user, signOut as firebaseSignOut } from '@/composables/useFirebase'
 import { initialized } from '@/composables/useFirebase'
 
+const loading = inject<boolean>('loading')
+
 const props = defineProps<{
   sideBarCollapsed: boolean
 }>()
@@ -42,7 +44,7 @@ const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
         />
       </div>
       <div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3">
-        <template v-if="initialized">
+        <template v-if="!loading">
           <SearchBar @active="(active) => (searchActive = active)" />
           <button
             class="search-active-hide btn-outline btn-sm btn py-1 text-white"