Form Submit Progress
Submit narrows to a turning disc while the request runs, then opens out as the confirmed state.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Form Submit Progress
*
* A submit control that narrows to a turning disc while the request is
* in flight and opens back out as the confirmed state. The row it sitsAbout this pattern
Three states in one control, with the form behind it holding perfectly still. The button collapses to a disc for the length of the request and opens back out to report what happened, while the row around it keeps the resting width the whole time — so nothing under the button shifts and no one loses their place. The label, the disc and the confirmation are three stacked layers crossfading inside a single box: text is never re-flowed by the width it sits in, it just fades. Pressing is locked out until the control is back at rest, which is the cheapest double-submit guard there is.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Issue tracker
Submit controls resolve inline instead of throwing a blocking overlay.
Related patterns
- Delete Confirm MorphA delete control widens in place into a question with a way out, instead of opening a dialog.
- Destructive Hold to ConfirmHolding fills the control at an honest rate; letting go early drains it back several times faster.
- Error Retry NudgeA failed action answers with one short damped nudge and becomes its own retry.