Skeleton Reveal

Usage

import { SkeletonReveal, SkeletonRevealBlock } from '@wdzyi/ui';

<SkeletonReveal loaded={!!post}>
  <SkeletonRevealBlock className='size-9' ready={pictured}>
    <img src={post?.cover} alt='' onLoad={() => setPictured(true)} />
  </SkeletonRevealBlock>
  <SkeletonRevealBlock className='h-10 w-full' lines={2}>
    <p className='truncate'>{post?.title}</p>
    <p className='truncate'>{post?.summary}</p>
  </SkeletonRevealBlock>
</SkeletonReveal>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

loadedboolean

Off while it loads. On, the blocks turn into their content one after another.

staggernumber = 70

The time between one block turning and the next, in ms.

classNamestring

On a block: its size, which it keeps before and after.

linesnumber

On a block: draws it as that many lines of text, the last one shorter. Give it the height of the lines.

readyboolean = true

On a block: whether its own content is ready, such as a picture that has decoded.

Notes

• Each block has its size from the start and its content arrives inside it, so nothing around it moves when it lands.
• Blocks turn in reading order, 70ms apart, the grey fading as the content comes up out of a blur. Their pulse runs in the same order, as a slow wave.
• A block given ready waits for its own content too, and turns as soon as it’s there, even after the rest. Loading again puts every block straight back to grey, as a reload would.
• Content is inert until it shows, so nothing hidden can be tabbed to, and the group is marked busy while it loads.
• With reduced motion, the blocks hold still and swap without fading.