page loading states

src/renderer/src/components/PageLoading.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="page-loading">
+        <svg-spinner />
+    </div>
+</template>
+
+<script setup>
+import SvgSpinner from '@/components/svg/Spinner.vue'
+</script>
+
+<style lang="scss">
+.page-loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+}
+</style>

src/renderer/src/components/note/Editor.vue

@@ -4,6 +4,8 @@
 
         <editor-menu :editor="editor" />
     </div>
+
+    <page-loading v-else />
 </template>
 
 <script setup>
@@ -19,6 +21,7 @@ import useNotes from '@/composables/useNotes'
 import StarterKit from '@tiptap/starter-kit'
 import _debounce from 'lodash/debounce'
 import EditorMenu from './Menu.vue'
+import PageLoading from '@/components/PageLoading.vue'
 
 const props = defineProps({
     id: {

src/renderer/src/views/Directory.vue

@@ -1,5 +1,5 @@
 <template>
-    <main class="directory layout-block">
+    <main v-if="loaded" class="directory layout-block">
         <category-row
             v-for="(category, i) in categories"
             :index="i"
@@ -13,6 +13,8 @@
             <note-row v-for="note in notes" :note="note" :key="note.id" />
         </div>
     </main>
+
+    <page-loading v-else />
 </template>
 
 <script setup>
@@ -22,6 +24,7 @@ import useConfig from '@/composables/useConfig'
 import { onMounted, ref, watch } from 'vue'
 import CategoryRow from '@/components/CategoryRow.vue'
 import NoteRow from '@/components/NoteRow.vue'
+import PageLoading from '@/components/PageLoading.vue'
 
 const { categories, loadCategories, loadCategoryNotes, notesChangeCount } =
     useNotes()
@@ -29,10 +32,13 @@ const { categories, loadCategories, loadCategoryNotes, notesChangeCount } =
 const { config } = useConfig()
 
 const notes = ref()
+const loaded = ref(false)
 
-async function refreshNotes() {
+const refreshNotes = async () => {
+    loaded.value = false
     await loadCategories()
     notes.value = await loadCategoryNotes()
+    loaded.value = true
 }
 
 onMounted(async () => {