Inline Autosave
A field that saves itself after you stop typing, and says which of the three states it is in.
Build a text field that saves itself after the typing stops. The timing IS the component: about 900ms of quiet before saving starts, then a save that takes around 700ms before landing on saved. Saving on every keystroke floods the network and leaves the indicator flickering between two states forever. THREE states, never two: unsaved (edited, not yet sent), saving (request in flight), saved. Collapse the first two and the moment between typing and the request leaving is silent, which is precisely when people close the tab. Every state must be a WORD. A coloured dot alone cannot say whether the last edit landed; let the dot reinforce the word, never replace it. Give the status row a FIXED height, so the field does not shift as the label changes length between "saved" and "saving…". Swap the states rather than cross-fading them: the old word exits upward while the new one enters from below, 180ms. A cross-fade gives you a frame where both are legible and neither is true. Keep every timeout in a ref and clear them on unmount AND at the start of each change. Without the clear, a fast typist queues a save per keystroke and they all land out of order. Accessibility: a real label bound to the input, and aria-live="polite" on the status so the save is confirmed to a screen reader without interrupting typing. Under prefers-reduced-motion, use opacity only. The words still change and the TIMING IS UNTOUCHED, because the debounce is behaviour rather than decoration. Colors as tokens: your success token for saved, muted ink for unsaved and saving, surface and border for the field. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.