Background Refresh Hint
A two-pixel tinted band travels the panel's top edge while data refetches, without interrupting reading.
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, useState } from "react";
import type { ReactNode } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Background Refresh Hint
*
* Data is being refetched under content someone is already reading. TheAbout this pattern
Cached content is on screen and being read; a refetch is in flight behind it. The wrong answer is to dim the panel or replace it with a waiting state, because the content is still true. Instead the entire indicator lives in a two-pixel strip along the top edge, inside the panel's own rounding, where a tinted band travels from side to side. Content keeps full opacity, nothing is disabled, and `aria-busy` carries the same fact the band does. When the fetch lands the band retires and the timestamp crossfades to 'just now' inside a reserved box, so the header never shifts. Nothing springs here — a hint that overshoots is asking to be looked at, which is the opposite of the job.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Inbox
The list stays readable while new mail is fetched behind it.
Related patterns
- Content Placeholder PulsePlaceholder blocks rise and fall together on one slow cadence, so the region reads as dormant rather than busy.
- Infinite Scroll FooterA footer spinner fills a slot that was already reserved, and the next page fades in above it.
- Cache Hit InstantCached content gets no entrance at all; only the values that actually changed animate.