Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA transfer list that shows each move immediately, saves in the background, ignores slow older responses and reverts with an error and Retry when a save fails. Use this when the lists live on a server and the interface must stay responsive.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for settings, rules and subscriptions that are stored on a server, where waiting for each response would make the lists feel slow.
Do not use it when a failed save must block the person (use a form with a Save button), or when several people edit the same list at once without conflict handling.
It composes button, transfer-list, which the CLI installs for you.
import { OptimisticTransferSave } from "@/components/optimistic-transfer-save"<OptimisticTransferSave
items={channels}
initialValue={saved}
save={(ids) => api.setChannels(ids)}
/>| Prop | Type | Default | Description |
|---|---|---|---|
items | TransferItem[] | - | The things to move. |
initialValue | string[] | [] | The saved list. |
save | (ids) => Promise<void> | - | Save the new list; reject to revert. |
titles | [string, string] | ["Available", "Selected"] | List names. |
aria-busy while saving; progress is a status message and failure is a role="alert" with a Retry button.The pattern ships with a Testing Library test (optimistic-transfer-save.test.tsx) that covers the instant move, the revert and retry, and a late older response.