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"