From 51e2888bb8f21200785315a72beaa7c61af14860 Mon Sep 17 00:00:00 2001
From: Gamosoft <gamosoft@users.noreply.github.com>
Date: Tue, 30 Jun 2026 14:59:47 +0200
Subject: [PATCH] skeleton treeview

---
 frontend/index.html | 48 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 41 insertions(+), 7 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 228be3a..b98079e 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1823,14 +1823,48 @@
                         <!-- Root notes and images (no folder) -->
                         <div x-html="renderRootItems()"></div>
                         
-                        <!-- Loading state (initial /api/notes still in flight) -->
+                        <!-- Loading state (initial /api/notes still in flight).
+                             Static shimmer skeleton — pure CSS, no state. Folder
+                             rows are full-width with a square icon; note rows
+                             are indented with a smaller icon. Staggered animation
+                             delays make the rows pulse out of sync so the column
+                             feels alive instead of strobing. The 800ms overlay
+                             still appears for big-vault cold loads on top of
+                             this — they layer naturally. -->
                         <template x-if="notesLoading && notes.length === 0 && allFolders.length === 0">
-                            <div class="px-3 py-4 text-sm text-center flex items-center justify-center gap-2" style="color: var(--text-tertiary);">
-                                <svg class="animate-spin h-4 w-4" style="color: var(--accent-primary);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                </svg>
-                                <span x-text="t('sidebar.loading_notes')"></span>
+                            <div class="px-2 py-2 space-y-1" aria-busy="true" :aria-label="t('sidebar.loading_notes')">
+                                <div class="flex items-center gap-2 py-1.5 px-2 animate-pulse">
+                                    <div class="h-4 w-4 rounded shrink-0" style="background-color: var(--bg-hover);"></div>
+                                    <div class="h-3 rounded" style="width: 62%; background-color: var(--bg-hover);"></div>
+                                </div>
+                                <div class="flex items-center gap-2 py-1.5 pl-7 pr-2 animate-pulse" style="animation-delay: .12s;">
+                                    <div class="h-3 w-3 rounded shrink-0" style="background-color: var(--bg-hover);"></div>
+                                    <div class="h-3 rounded" style="width: 48%; background-color: var(--bg-hover);"></div>
+                                </div>
+                                <div class="flex items-center gap-2 py-1.5 pl-7 pr-2 animate-pulse" style="animation-delay: .22s;">
+                                    <div class="h-3 w-3 rounded shrink-0" style="background-color: var(--bg-hover);"></div>
+                                    <div class="h-3 rounded" style="width: 70%; background-color: var(--bg-hover);"></div>
+                                </div>
+                                <div class="flex items-center gap-2 py-1.5 px-2 animate-pulse" style="animation-delay: .32s;">
+                                    <div class="h-4 w-4 rounded shrink-0" style="background-color: var(--bg-hover);"></div>
+                                    <div class="h-3 rounded" style="width: 55%; background-color: var(--bg-hover);"></div>
+                                </div>
+                                <div class="flex items-center gap-2 py-1.5 pl-7 pr-2 animate-pulse" style="animation-delay: .42s;">
+                                    <div class="h-3 w-3 rounded shrink-0" style="background-color: var(--bg-hover);"></div>
+                                    <div class="h-3 rounded" style="width: 38%; background-color: var(--bg-hover);"></div>
+                                </div>
+                                <div class="flex items-center gap-2 py-1.5 pl-7 pr-2 animate-pulse" style="animation-delay: .52s;">
+                                    <div class="h-3 w-3 rounded shrink-0" style="background-color: var(--bg-hover);"></div>
+                                    <div class="h-3 rounded" style="width: 80%; background-color: var(--bg-hover);"></div>
+                                </div>
+                                <div class="flex items-center gap-2 py-1.5 px-2 animate-pulse" style="animation-delay: .62s;">
+                                    <div class="h-4 w-4 rounded shrink-0" style="background-color: var(--bg-hover);"></div>
+                                    <div class="h-3 rounded" style="width: 42%; background-color: var(--bg-hover);"></div>
+                                </div>
+                                <div class="flex items-center gap-2 py-1.5 pl-7 pr-2 animate-pulse" style="animation-delay: .72s;">
+                                    <div class="h-3 w-3 rounded shrink-0" style="background-color: var(--bg-hover);"></div>
+                                    <div class="h-3 rounded" style="width: 50%; background-color: var(--bg-hover);"></div>
+                                </div>
                             </div>
                         </template>