web: unify empty + loading states behind EmptyState/InlineLoader
Replaces ad-hoc "Loading…" text and bare empty messages with two
shared feedback primitives that carry subtle lucide icons, consistent
muted-foreground/destructive tones, and a11y signaling (role=status,
aria-busy, role=alert on destructive empties). Loading copy gains
context ("Loading photos/folders/heaps/metadata…") and the right-
sidebar idle state moves from a "ⓘ" glyph to a MousePointerClick
icon. SkeletonGrid stays as the initial-grid loader.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -55,7 +55,9 @@
|
||||
Copy,
|
||||
Download,
|
||||
FolderInput,
|
||||
FolderOpen,
|
||||
FolderPlus,
|
||||
Layers,
|
||||
LogOut,
|
||||
Moon,
|
||||
Pencil,
|
||||
@@ -63,6 +65,7 @@
|
||||
Sun,
|
||||
Trash2
|
||||
} from 'lucide-svelte';
|
||||
import { EmptyState, InlineLoader } from '$lib/components/feedback';
|
||||
|
||||
const qc = useQueryClient();
|
||||
|
||||
@@ -757,9 +760,9 @@
|
||||
</div>
|
||||
</div>
|
||||
{#if foldersQuery.isPending}
|
||||
<p class="px-2 text-[11px] text-muted-foreground">Loading…</p>
|
||||
<InlineLoader size="sm" label="Loading folders…" />
|
||||
{:else if !hasSubfolders}
|
||||
<p class="mt-1 px-2 text-[11px] text-muted-foreground">No subfolders.</p>
|
||||
<EmptyState size="compact" icon={FolderOpen} title="No subfolders" />
|
||||
{:else if rootExpanded}
|
||||
<!--
|
||||
depth=1 visually nests the top-level subfolders one indent
|
||||
@@ -795,11 +798,11 @@
|
||||
</div>
|
||||
|
||||
{#if heapsQuery.isPending}
|
||||
<p class="px-2 text-[11px] text-muted-foreground">Loading…</p>
|
||||
<InlineLoader size="sm" label="Loading heaps…" />
|
||||
{:else if heapsQuery.isError}
|
||||
<p class="px-2 text-[11px] text-destructive">Failed to load heaps</p>
|
||||
<EmptyState size="compact" tone="destructive" title="Failed to load heaps" />
|
||||
{:else if (heapsQuery.data ?? []).length === 0}
|
||||
<p class="px-2 text-[11px] text-muted-foreground">No heaps yet.</p>
|
||||
<EmptyState size="compact" icon={Layers} title="No heaps yet" />
|
||||
{:else}
|
||||
<ul>
|
||||
{#each heapsQuery.data ?? [] as heap (heap.UID)}
|
||||
|
||||
Reference in New Issue
Block a user