Optimistic Row Insert
The new entry lands at half opacity the instant it is asked for, then firms up when the server agrees.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Optimistic Row Insert
*
* The row lands the instant it is asked for, at reduced opacity and with
* a hollow marker, and firms up when the server agrees. Nothing waits onAbout this pattern
The alternative to a disabled button and a wait. On submit the entry is in the list on the same tick, at reduced opacity with a hollow marker — legible, but visibly provisional — and the neighbours reflow around it on a spring that settles once. When the write is acknowledged the opacity firms to full and the marker fills; that single value is the whole difference between asked-for and real, which is what makes a rejection easy to reverse. The status word crossfades inside a reserved box so the entry never changes width, and no part of the sequence blocks anything else on the page.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Issue tracker
A new row appears in the list the moment you submit, before the server has confirmed it.
Related patterns
- Spinner to CheckThe waiting arc finishes its turn, closes into a full ring, and the confirming stroke lands inside it.
- Staggered List EntranceRows fade and lift into place about fifty milliseconds apart, top to bottom.
- File Upload ProgressA file row's bar fills as bytes land while the percentage and the counter roll with it.