builderadmin
/
NoteDiscovery
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

skeleton treeview

This commit is contained in:
Gamosoft 2026-06-30 14:59:47 +02:00
parent f8f697ea59
commit 51e2888bb8
1 changed files with 41 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/index.html
View File

@ -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>