Work Carousel

Filterable case-study carousel used on /work. Wraps CaseStudyCarousel and reads the `?category=` URL param so it stays in sync with the CategoryFilters component. Shows a shimmer skeleton during filter transitions.

Live preview (default — all case studies)

With no `?category=` param applied, the carousel renders every case study. Wrap in a Suspense boundary because it reads the URL search params.

Loading skeleton (transition state)

When the URL category changes, the carousel briefly overlays this shimmer skeleton (~500ms) before swapping to the filtered list. Shown here on its own.

Behavior

Filtering

Reads `?category=` from `useSearchParams`. The visible category state is debounced — when the URL changes, the carousel keeps displaying the previous list for 500ms while a shimmer overlay fades in, then swaps.

Empty state

If the active category has no matching studies, renders a single centered "No case studies match this filter yet." message instead of an empty carousel.

Pairing

Used together with `<CategoryFilters />`, which writes the `?category=` value the carousel reacts to.

Import

tsx

import { WorkCarousel } from '@/components/sections/WorkCarousel'