Animated list
List rows glide to new positions and fade in or out as items are added, removed, or reordered.
- Fix checkout race conditionUrgent
- Refresh onboarding copyLow
- Rotate API keysHigh
- Audit bundle sizeLow
- Publish token contract v2Done
- Debounce catalog searchLow
Implementation
1"use client";2 3import { useEffect, useLayoutEffect, useRef, useState } from "react";4import type { HTMLAttributes } from "react";5import { runViewTransition } from "@/lib/view-transition";6import { ViewTransitionSafe } from "./ViewTransitionSafe";7 8export type AnimatedListItem = {9 id: string;10 title: string;11 meta?: string;12 badge?: string;13 badgeTone?: "neutral" | "accent" | "success" | "warning" | "danger";14 initials?: string;15};16 17export type AnimatedListProps = Omit<18 HTMLAttributes<HTMLDivElement>,19 "children" | "onChange"20> & {21 /** Rows to render. Reorder, add, or remove them inside a transition to animate. */22 items: AnimatedListItem[];23 /** Accessible name for the list. */24 label: string;25 /** When set, each row gets a remove button that calls back with the item id. */26 onRemove?: (id: string) => void;27 /** Text shown when the list is empty. */28 emptyLabel?: string;