From 6f76c46299edce03d083064f8a17c5bb0b8bc8a6 Mon Sep 17 00:00:00 2001
From: nicwands <wands.nic@gmail.com>
Date: Tue, 17 Mar 2026 12:51:05 -0400
Subject: [PATCH] page loading states

---
 src/renderer/src/components/PageLoading.vue | 24 +++++++++++++++++++++
 src/renderer/src/components/note/Editor.vue |  3 +++
 src/renderer/src/views/Directory.vue        | 10 +++++++--
 3 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/src/components/PageLoading.vue

diff --git a/src/renderer/src/components/PageLoading.vue b/src/renderer/src/components/PageLoading.vue
new file mode 100644
index 0000000..e1ec605
--- /dev/null
+++ b/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>
diff --git a/src/renderer/src/components/note/Editor.vue b/src/renderer/src/components/note/Editor.vue
index 129b474..228b3bb 100644
--- a/src/renderer/src/components/note/Editor.vue
+++ b/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: {
diff --git a/src/renderer/src/views/Directory.vue b/src/renderer/src/views/Directory.vue
index 3d05f20..071b1c5 100644
--- a/src/renderer/src/views/Directory.vue
+++ b/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 () => {