Table Rows Populate
Placeholder cells resolve one column at a time, so the eye follows the fill instead of hunting for it.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Table Rows Populate
*
* Placeholder cells resolve column by column rather than row by row.
* A table is read down its columns — you compare one field acrossAbout this pattern
Grids of figures are read down, not across — you compare one field between accounts, rarely one account across fields. So this fills the same way: the delay is dominated by the column index and barely touched by the row index, which turns the resolve into a vertical wipe moving left to right rather than a diagonal cascade. Headers are never placeholders, because the shape of the grid is known long before the data is. Each cell keeps its value and its placeholder in one grid cell so the row is already its final height, and the numeric columns use tabular figures so they cannot twitch sideways as they land.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Data table
Rows fill into an empty table as the query returns them.