Success Check

Usage

import { SuccessCheck } from '@wdzyi/ui';

<SuccessCheck
  status={status}
  onClick={async () => {
    setStatus('working');
    await saveProfile(draft);
    setStatus('done');
  }}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

status'idle' | 'working' | 'done' = 'idle'

Save, Saving with the pixels working, or Saved with the tick. Done settles back to Save by itself.

labelsPartial<Record<SuccessCheckStatus, string>> = { idle: 'Save', working: 'Saving', done: 'Saved' }

Its words for each state, such as Send, Sending and Sent. The letters they share stay put as one becomes the next.

settlenumber = 2400

How long Saved stays before it settles back to Save, in ms. Infinity keeps it.

size28 | 32 | 36 | 40 = 36

Its height, as the buttons have. The tick is 16px at 36 and 40, and 14px below.

onClick, type, disabledvarious

As for any button, and type can be submit. While it works it takes no second press, so nothing is saved twice.

Notes

• It’s only as big as a button, so it sits in a form beside the field it saves. Saving opens a slot beside the word over 300ms, with the pixel loader the agent components use, and the word morphs, keeping the letters it shares.
• Done, the ink drains to a plate over 250ms and the pixels shrink into a blur as the tick grows out of one. The tick draws itself in green 100ms behind, over 420ms, down the short stroke and up the long one. 2.4 seconds later it settles back the same way.
• It sends success when it’s done, whoever said so, but not when it arrives already done. A screen reader hears Saving, then Saved, and the button’s name follows its word.
• With reduced motion, it changes without the drain, the slot opening or the draw.