ChartSkeleton

The ChartSkeleton component provides an animated loading placeholder for charts. It mimics the structure of a bar chart with pulsing animations to indicate loading state.

Import​

<script>
  import { ChartSkeleton } from '@classic-homes/charts-svelte';
</script>

Basic Usage​

<script>
  import { ChartSkeleton } from '@classic-homes/charts-svelte';
</script>

<ChartSkeleton />

Props​

Examples​

Custom Height​

<ChartSkeleton height={300} />

With Custom Class​

<ChartSkeleton class="rounded-xl shadow-md" />

Conditional Loading​

<script>
  import { ChartSkeleton, LineChart } from '@classic-homes/charts-svelte';

  let loading = $state(true);
  let data = $state(null);

  async function loadData() {
    loading = true;
    data = await fetchChartData();
    loading = false;
  }
</script>

{#if loading}
  <ChartSkeleton height={400} />
{:else}
  <LineChart {data} title="Revenue" />
{/if}

In Card​

<script>
  import { ChartSkeleton, AreaChart } from '@classic-homes/charts-svelte';
  import { Card, CardHeader, CardTitle, CardContent } from '@classic-homes/theme-svelte';
</script>

<Card>
  <CardHeader>
    <CardTitle>Analytics</CardTitle>
  </CardHeader>
  <CardContent>
    {#if loading}
      <ChartSkeleton height={300} />
    {:else}
      <AreaChart {data} title="Monthly Users" />
    {/if}
  </CardContent>
</Card>

Multiple Skeletons​

<div class="grid grid-cols-2 gap-4">
  <ChartSkeleton height={250} />
  <ChartSkeleton height={250} />
</div>

Accessibility​

• Uses animate-pulse which respects prefers-reduced-motion
• Has role="status", aria-busy="true" and an aria-label (label) so screen readers announce loading; the placeholder shapes are hidden from them
• Should be replaced with actual chart once data loads

Related Charts​

• ChartContainer - Wrapper with state handling
• ChartError - Error state component
• ChartEmpty - Empty state component
• Skeleton - General skeleton component