diff --git a/apps/loopover-ui/src/components/site/skeleton-reduced-motion.test.tsx b/apps/loopover-ui/src/components/site/skeleton-reduced-motion.test.tsx new file mode 100644 index 0000000000..c0c6588936 --- /dev/null +++ b/apps/loopover-ui/src/components/site/skeleton-reduced-motion.test.tsx @@ -0,0 +1,24 @@ +import { render } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + +import { Skeleton } from "@loopover/ui-kit/components/skeleton"; + +// #7016: every other animated ui-kit primitive (Spinner, button.tsx, tabs.tsx) disables/reduces its +// animation under prefers-reduced-motion via motion-reduce:animate-none; Skeleton was the one loading-state +// primitive that didn't, despite state-views.tsx's own doc comment claiming the whole family respects it. +describe("Skeleton respects prefers-reduced-motion (#7016)", () => { + it("pairs animate-pulse with motion-reduce:animate-none", () => { + const { container } = render(); + const el = container.firstElementChild; + expect(el?.className).toContain("animate-pulse"); + expect(el?.className).toContain("motion-reduce:animate-none"); + }); + + it("still merges a caller-supplied className", () => { + const { container } = render(); + const el = container.firstElementChild; + expect(el?.className).toContain("h-4"); + expect(el?.className).toContain("w-full"); + expect(el?.className).toContain("motion-reduce:animate-none"); + }); +}); diff --git a/packages/loopover-ui-kit/src/components/skeleton.tsx b/packages/loopover-ui-kit/src/components/skeleton.tsx index 6409369beb..1916a9286c 100644 --- a/packages/loopover-ui-kit/src/components/skeleton.tsx +++ b/packages/loopover-ui-kit/src/components/skeleton.tsx @@ -1,7 +1,7 @@ import { cn } from "../utils"; function Skeleton({ className, ...props }: React.HTMLAttributes) { - return
; + return
; } export { Skeleton };