skeleton loader

src/components/SideBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { rootNote, notes, setActiveNote } from '@/composables/useNotes'
+import { initialized } from '@/composables/useFirebase'
 
 const props = defineProps<{
   viewModes: ViewMode[]
@@ -22,23 +23,28 @@ const emit = defineEmits<{
           icon="fas fa-fw fa-home"
           @click="setActiveNote(rootNote?.id)"
           :title="rootNote?.title"
+          v-if="initialized"
         >
           {{ rootNote?.title }}
         </SideBarMenuItem>
+        <SkeletonSidebarItem v-else />
       </template>
     </SideBarMenu>
     <SideBarMenu>
       <template #header>View mode</template>
       <template #items>
-        <SideBarMenuItem
-          v-for="viewMode in props.viewModes"
-          :key="viewMode.name"
-          :icon="viewMode.icon"
-          :active="viewMode.name === activeViewMode.name"
-          @click="emit('setViewMode', viewMode)"
-        >
-          {{ viewMode.name }}
-        </SideBarMenuItem>
+        <template v-if="initialized">
+          <SideBarMenuItem
+            v-for="viewMode in props.viewModes"
+            :key="viewMode.name"
+            :icon="viewMode.icon"
+            :active="viewMode.name === activeViewMode.name"
+            @click="emit('setViewMode', viewMode)"
+          >
+            {{ viewMode.name }}
+          </SideBarMenuItem>
+        </template>
+        <SkeletonSidebarItem :n="3" v-else />
       </template>
     </SideBarMenu>
     <SideBarMenu>
@@ -47,15 +53,18 @@ const emit = defineEmits<{
         Recent notes
       </template>
       <template #items>
-        <SideBarMenuItem
-          v-for="note in notes.slice(-10)"
-          :key="note.id"
-          icon="far fa-file-alt fa-fw"
-          @click="setActiveNote(note.id)"
-          :title="rootNote?.title"
-        >
-          {{ note.title }}
-        </SideBarMenuItem>
+        <template v-if="initialized">
+          <SideBarMenuItem
+            v-for="note in notes.slice(-10)"
+            :key="note.id"
+            icon="far fa-file-alt fa-fw"
+            @click="setActiveNote(note.id)"
+            :title="rootNote?.title"
+          >
+            {{ note.title }}
+          </SideBarMenuItem>
+        </template>
+        <SkeletonSidebarItem v-else :n="5" />
       </template>
     </SideBarMenu>
   </div>