Feedback

Skeleton

Animated placeholder for content that is still loading.

Element: <div>
Module: @basenative/components
Function: renderSkeleton

Quick start

Import the render function and call it from your server template.

import { renderSkeleton } from '@basenative/components';

renderSkeleton({ width: '100%', height: '1rem', count: 3 });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Three lines

Animated placeholder rows with a shimmer.

Live render

Source

renderSkeleton({ width: '100%', height: '1rem', count: 3 })

Simulated load

Click "Reload" to swap the real content out for skeletons for 1.2s, then back.

Live render

Project: Atlas

Last updated 12 minutes ago by Carol Davis.

Status: shipped to staging — ready for review.

Source

const realHtml = target.innerHTML;
const skeletonHtml =
  '<div data-bn="skeleton-stack">' +
  ['100%', '85%', '70%']
    .map((w) => '<div data-bn="skeleton" style="width:' + w + ';height:1rem"></div>')
    .join('') +
  '</div>';

const loading = signal(false);

// renderSkeleton() is a server helper; in the browser the signal swaps the markup.
effect(() => { target.innerHTML = loading() ? skeletonHtml : realHtml; });

reload.onclick = () => {
  loading.set(true);
  setTimeout(() => loading.set(false), 1200);
};

Options

Arguments accepted by renderSkeleton().

renderSkeleton option reference
Option	Type	Default	Description
`width`	`string`	`'100%'`	CSS width.
`height`	`string`	`'1rem'`	CSS height.
`count`	`number`	`1`	Number of bars.