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 };