feat(design): skeleton first loads by shape on the shared reveal clock (E28 S3d2, B8)

2026-09-25 00:37:45 +02:00
parent c47c193ad1
commit 6354454cc9
21 changed files with 134 additions and 50 deletions
@@ -75,3 +75,15 @@ describe("LoadingState reveal", () => {
    expect(revealDelay(container)).toBe(150);
  });
 });
+
+describe("LoadingState shape (B8)", () => {
+  it("shows the content's skeleton on the same clock, the label for a screen reader only", () => {
+    now = 90_000;
+    const { container } = render(<LoadingState shape="list" label="Loading playlists" />);
+    const status = container.querySelector<HTMLElement>("[role=status]")!;
+    expect(revealDelay(container)).toBe(300);
+    expect(status.querySelector(".animate-spin")).toBeNull();
+    expect(status.querySelectorAll(".animate-pulse").length).toBeGreaterThan(0);
+    expect(status.querySelector(".sr-only")?.textContent).toBe("Loading playlists");
+  });
+});