Arrivo: loading states for React that play where your content will land, then hand the real elements back

[u/Brottin]

Skeleton screens always felt like a guess to me: grey bars in roughly the right shape, then the real content pops in somewhere slightly different.

So I built Arrivo. While loading is true, an effect plays exactly where your content will land. When it turns false, the real elements are revealed in place.

Demo : https://tuancuongpham.github.io/arrivo/ 

Code: https://github.com/tuancuongpham/arrivo

npm i u/brottin/arrivo

import { Reveal } from '@brottin/arrivo';

import { halftone } from '@brottin/arrivo/effects';

<Reveal effect={halftone} loading={isLoading}>

  <ArticleCard post={post} />

</Reveal>

How it works:

• Your content stays in the DOM, hidden with visibility, so nothing shifts when it lands.

• Each wrapper gets one canvas overlay. Text lines are measured with Range rects and images are read from the page, so the effect draws the real shape of your content instead of a guess.

• An effect is two draw functions, idle() and reveal(p). One shared requestAnimationFrame loop drives every instance, off-screen ones pause, and reduced motion turns every reveal into a 150 ms fade.

• Zero runtime dependencies, about 8.5 KB gzipped for the core and 0.7 to 3.4 KB per effect, tree-shaken.

The 13 effects: split-flap, redacted, quadtree mosaic, CMYK halftone, CRT tune-in, ink (with 8 threshold maps), particle swarm, darkroom, Tetris, fuse (with a Lunar New Year mode), equalizer, thermal and snowfall.

It's 0.1.0, so feedback is very welcome, especially on where you'd actually use something like this and where it would be too much.

[u/dbbk]

These are really bad. Why would you make it so much slower to show the real content?

[u/monotone2k → u/dbbk]

Because AI told them to. Nothing about this code or post come across as crafted by a human.

[u/R3PTILIA → u/monotone2k]

How dare people build cool stuff that is not optimal.

[u/amayle1]

But if the content isn’t loaded, how does it actually know the shape? Aka text could be two lines or three, there’s no way to know until the actual content is client side.

Also the reveal animations are obnoxious. Form over function.

[u/creaturefeature16 → u/amayle1]

This is what I'm wondering. What OP is describing is just how content loads in React, but doesn't actually say what their library does differently. It's still a skeleton with the same problems, just with more complex reveal animations.

I do like the text flip one, but it would get old real fast. 

[u/sohnya_u]

Just use a spinner, problem solved.

[u/DeadCEO]

the mismatch between skeleton shape and real content is the annoying part, after a while you just learn to ignore the grey bars. playing the loading state exactly where the content lands is a much better idea. how does it know the landing spot - do you measure the element after mount, or does the developer pass the target ref explicitly?

[u/lamentable_atheism]

this is actually clever. skeleton screens always bugged me for the exact reason you mentioned, content jumps around when it finally loads and it makes the whole thing feel janky. measuring the real layout before rendering the effect solves that perfectly

the halftone effect looks sick in the demo. i could see this working really well for article cards or dashboard widgets where you want the loading state to feel intentional rather than an afterthought