mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-08-29 03:55:38 -04:00
jakeandClaude Opus 4.6
13d616a456
Motion's initial="hidden" rendered opacity:0 in server HTML, making content invisible until JS hydrated — causing a multi-second blank gap after skeleton disappearance. Replaced with CSS @keyframes stagger animation that plays immediately from SSR. Also made color extraction fire-and-forget, merged duplicate stats queries, and removed redundant dashboard loading.tsx. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
} from "@/components/ui/carousel";
|
|
import {
|
|
ContinueWatchingCard,
|
|
type ContinueWatchingItemProps,
|
|
} from "./continue-watching-card";
|
|
|
|
export function ContinueWatchingList({
|
|
items,
|
|
}: {
|
|
items: ContinueWatchingItemProps[];
|
|
}) {
|
|
return (
|
|
<Carousel
|
|
opts={{ align: "start", dragFree: true, containScroll: "trimSnaps" }}
|
|
plugins={[WheelGesturesPlugin({ forceWheelAxis: "x" })]}
|
|
className="-mx-4 sm:-mx-0"
|
|
>
|
|
<CarouselContent className="px-4 sm:px-0">
|
|
{items.map((item, i) => (
|
|
<CarouselItem key={item.title.id} className="basis-auto pl-4">
|
|
<div
|
|
className="animate-stagger-item"
|
|
style={{ "--stagger-index": i } as React.CSSProperties}
|
|
>
|
|
<ContinueWatchingCard item={item} />
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
</Carousel>
|
|
);
|
|
}
|