skeleton loader

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { activeNote, updateNote } from '@/composables/useNotes'
 import { viewModes, activeViewMode } from '@/composables/useViewMode'
+import { initialized } from '@/composables/useFirebase'
 const sideBarCollapsed = ref(false)
 </script>
 
@@ -20,15 +21,18 @@ const sideBarCollapsed = ref(false)
       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'"
     >
-      <Note
-        v-if="activeViewMode.name === 'Note' && activeNote"
-        :key="activeNote.id"
-        :note="activeNote"
-        class=""
-        @update="(note) => updateNote(note.id, note)"
-      />
-      <ListView v-else-if="activeViewMode.name === 'List'" />
-      <Mindmap v-else-if="activeViewMode.name === 'Mindmap'" />
+      <template v-if="initialized">
+        <Note
+          v-if="activeViewMode.name === 'Note' && activeNote"
+          :key="activeNote.id"
+          :note="activeNote"
+          class=""
+          @update="(note) => updateNote(note.id, note)"
+        />
+        <ListView v-else-if="activeViewMode.name === 'List'" />
+        <Mindmap v-else-if="activeViewMode.name === 'Mindmap'" />
+      </template>
+      <SkeletonNote v-else />
     </main>
   </div>
 </template>