Large List Filter Transition

ProNew

An inline search over fifty thousand rows that keeps typing instant with useDeferredValue, dims the list and says Filtering while a filter catches up, then announces the final count once. Use this when filtering a big list should never lag the keyboard.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

rowHeight32

visibleRows8

label

Guide and examples

When to use it

Use it for catalogue, log and directory filters with tens of thousands of rows, where the input must feel immediate even if rendering the matches takes longer than a frame.

Do not use it when the list is small enough to filter synchronously without a visible delay.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

| Prop | Type | Default | Description | | --------------- | ------------------------- | ------------------------- | -------------------------- | ------------------------- | | rows | { id, label }[] | - | Any number of rows. | | value | string \\ | null | - | Selected id (controlled). | | defaultValue | string \\ | null | null | Initial id. | | onValueChange | (id: string) => void | - | Runs when a row is picked. | | matcher | (row, query) => boolean | case-insensitive contains | How a row matches. | | rowHeight | number | 32 | Row height in pixels. | | visibleRows | number | 8 | Rows in the viewport. | | label | string | Rows | Names the control. |

Accessibility

The input keeps the typed text in an urgent state; the list renders from a deferred copy, so keystrokes are never blocked.
While the deferred value lags, the list is aria-busy and a Filtering… label is visible; once it settles a polite status reads 1,204 matches.
Rows are options in a listbox with aria-posinset and aria-setsize; the highlight is exposed with aria-activedescendant.
matcher lets you search several fields or use a prebuilt index.

Testing

The pattern ships with a Testing Library test (large-list-filter-transition.test.tsx) that covers the deferred state, the settled count, keyboard selection and a custom matcher.

Guide and examples

When to use it

Use it for catalogue, log and directory filters with tens of thousands of rows, where the input must feel immediate even if rendering the matches takes longer than a frame.

Do not use it when the list is small enough to filter synchronously without a visible delay.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Accessibility

The input keeps the typed text in an urgent state; the list renders from a deferred copy, so keystrokes are never blocked.
While the deferred value lags, the list is aria-busy and a Filtering… label is visible; once it settles a polite status reads 1,204 matches.
Rows are options in a listbox with aria-posinset and aria-setsize; the highlight is exposed with aria-activedescendant.
matcher lets you search several fields or use a prebuilt index.

Testing

The pattern ships with a Testing Library test (large-list-filter-transition.test.tsx) that covers the deferred state, the settled count, keyboard selection and a custom matcher.