Shimmer

Svelte Guide

Learn how to use Shimmer From Structure with Svelte 5.

Installation

npm install @shimmer-from-structure/svelte

Basic Usage

Static Content

<script>
import { Shimmer } from '@shimmer-from-structure/svelte';

let isLoading = $state(true);
</script>

<Shimmer loading={isLoading}>
  <div class="card">
    <img src="avatar.jpg" class="avatar" />
    <h2>John Doe</h2>
    <p>Software Engineer</p>
  </div>
</Shimmer>

Dynamic Content with templateProps

<script>
import { Shimmer } from '@shimmer-from-structure/svelte';
import UserCard from './UserCard.svelte';

let { user } = $props();
let loading = $state(true);

const userTemplate = {
  name: 'Loading...',
  role: 'Loading role...',
  avatar: 'placeholder.jpg',
};
</script>

<Shimmer loading={loading} templateProps={{ user: userTemplate }}>
  <UserCard user={user || userTemplate} />
</Shimmer>

Global Configuration

Use setShimmerConfig to set global defaults:

<!-- App.svelte or any parent component -->
<script>
import { setShimmerConfig } from '@shimmer-from-structure/svelte';
import Dashboard from './Dashboard.svelte';

// Must be called at the top level during component initialization
setShimmerConfig({
  shimmerColor: 'rgba(56, 189, 248, 0.4)',
  backgroundColor: 'rgba(56, 189, 248, 0.1)',
  duration: 2.5,
  fallbackBorderRadius: 8,
});
</script>

<Dashboard />

Accessing Config

import { getShimmerConfig } from '@shimmer-from-structure/svelte';

const config = getShimmerConfig();
console.log(config.backgroundColor);

Examples

Dashboard with Multiple Sections

<script lang="ts">
  import { onMount } from 'svelte';
  import { Shimmer } from '@shimmer-from-structure/svelte';

  // Independent loading states
  let loadingUser = true;
  let loadingStats = true;
  let loadingTransactions = true;

  // Data
  let user = null;
  let stats = null;
  let transactions = null;

  // Template Data
  const userTemplate = { name: 'Loading...', role: 'Loading...', avatar: '' };
  const statsTemplate = [/* ... placeholders ... */];
  const transactionsTemplate = Array(5).fill({/* ... placeholders ... */});

  onMount(() => {
    // Simulate independent API calls
    setTimeout(() => { user = realUser; loadingUser = false; }, 1000);
    setTimeout(() => { stats = realStats; loadingStats = false; }, 2000);
    setTimeout(() => { transactions = realTransactions; loadingTransactions = false; }, 3000);
  });
</script>

<div class="dashboard">
  <!-- User Profile -->
  <section class="dashboard-section">
    <Shimmer loading={loadingUser} templateProps={{ user: userTemplate }}>
      <UserProfile user={user || userTemplate} />
    </Shimmer>
  </section>

  <!-- Stats Grid -->
  <section class="dashboard-section">
    <Shimmer
      loading={loadingStats}
      templateProps={{ stats: statsTemplate }}
      shimmerColor="rgba(20, 184, 166, 0.2)"
    >
      <StatsGrid stats={stats || statsTemplate} />
    </Shimmer>
  </section>

  <!-- Transactions List -->
  <section class="dashboard-section">
    <Shimmer loading={loadingTransactions} templateProps={{ transactions: transactionsTemplate }}>
      <TransactionsList transactions={transactions || transactionsTemplate} />
    </Shimmer>
  </section>
</div>

Next Steps