improve loading

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"

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"