Card Loader

import { CardLoader } from "@/ui";

Card Loader matches the Figma Card Loader Animation. Use it to fill a panel while something takes several seconds, like building an analysis plan, by showing short tips about the product. In the app it is shown in the workbook chat's plan panel while the plan is getting ready and while modifications are applied.

DefaultCopy Anchor Link

Three cards are stacked, the front one largest. Every 3 seconds the front card drops to the back and the next card grows into its place. The rail on the left shows which card is in front. The buttons on the right go to the previous card, pause or resume, and go to the next card.

<CardLoader
  cards={[
    { title: "Understanding your Data", description: "See what data is available...", image: dataPreview },
    { title: "Understanding Key Definitions (KDs)", description: "Standardize how metrics...", image: kdPreview },
    { title: "Petavue Visualization", description: "Create trustworthy charts...", image: vizPreview },
  ]}
/>

The first card in cards starts in front. Each card needs a unique title.

With a status lineCopy Anchor Link

Card Loader doesn't say what is loading. Put a short status line with a Spinner under it, as the workbook chat does.

<CardLoader cards={tips} />
<div className="status">
  <Spinner size={16} />
  Getting ready...
</div>

Without imagesCopy Anchor Link

A card without an image shows a Grey 100 block in its place. Use it for a draft before the screenshots exist. This example also sets interval to 4 seconds.

<CardLoader cards={tipsWithoutImages} interval={4000} />

AnatomyCopy Anchor Link

Card images are anchored to the top left and cropped to fill the space, so the top left of a screenshot is what shows. Use screenshots about 2:1 wide.

Cards move with a 0.6s ease. With reduced motion turned on, they switch without moving.

PropsCopy Anchor Link

Card Loader keeps its own place and pause state. It starts again from the first card each time it mounts.

Differences from FigmaCopy Anchor Link

• Figma has no state after Pause is pressed. Here the Pause button turns into a Play button.
• Figma has no hover state for the buttons. Here they turn Grey 100.
• The back card's fill is Figma's #FCFCFC, which isn't a token. It uses Grey 50 (#F8F9FC).

AccessibilityCopy Anchor Link

• The root is a section with aria-roledescription="carousel" and the label as its name. Only the front card is exposed to screen readers; the other two are aria-hidden.
• While cards change by themselves, changes aren't announced. Once paused, Previous and Next announce the new front card.
• The Pause button stops the cycle, which people need for anything that moves for more than 5 seconds. Keep it.
• Images are decorative (alt=""). The title and description carry the content.

Do and don'tCopy Anchor Link

• Do keep each description to one or two lines.
• Do use it only for waits of several seconds. For a short wait, use a Spinner or Skeleton.
• Don't use it for content people need to read to continue. It cycles on its own.
• Don't use more or fewer than three cards. The stack is drawn for three.