TapSkeleton - Tappify Documentation

function TapSkeleton(__namedParameters): ReactElement;

Renders the placeholder bars that stand in for content while a read is in flight.

Parameters

__namedParameters

TapSkeletonProps

Returns

ReactElement

Remarks

The bars are aria-hidden, so a screen reader is not told about them, and they take their tone from --bg-subtle. The pulse stops under prefers-reduced-motion. Render this while isLoading is true, in place of the content rather than beside it.

Example

import { TapSkeleton, TapStat, useTapQuery } from '@tappify/extension-sdk';

function Keywords() {
  const keywords = useTapQuery({ kind: 'keywords' });
  if (keywords.isLoading) return <TapSkeleton lines={3} />;
  return <TapStat label="Tracked" value={keywords.data?.keywords.length ?? 0} />;
}