feat(web): add LibrarySkeleton with list/grid/album variants

Shimmer placeholders that mirror the layout of each library page so the real content slides in without shifting.
2026-04-23 18:41:32 -04:00
parent 12d1cb739b
commit 9ed8e261d4
2 changed files with 71 additions and 0 deletions
@@ -0,0 +1,23 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import LibrarySkeleton from './LibrarySkeleton.svelte';
+
+describe('LibrarySkeleton', () => {
+  test('variant="list" renders count placeholder rows', () => {
+    render(LibrarySkeleton, { props: { variant: 'list', count: 5 } });
+    const container = screen.getByTestId('skeleton-list');
+    expect(container.querySelectorAll('[data-skeleton-row]').length).toBe(5);
+  });
+
+  test('variant="grid" renders count placeholder cards', () => {
+    render(LibrarySkeleton, { props: { variant: 'grid', count: 6 } });
+    const container = screen.getByTestId('skeleton-grid');
+    expect(container.querySelectorAll('[data-skeleton-card]').length).toBe(6);
+  });
+
+  test('variant="album" renders a hero placeholder with cover block + bars', () => {
+    render(LibrarySkeleton, { props: { variant: 'album' } });
+    expect(screen.getByTestId('skeleton-album')).toBeInTheDocument();
+    expect(screen.getByTestId('skeleton-album-cover')).toBeInTheDocument();
+  });
+});