Shimmer

SolidJS Guide

Learn how to use Shimmer From Structure with SolidJS.

Installation

npm install @shimmer-from-structure/solid

Basic Usage

Static Content

import { createSignal } from 'solid-js';
import { Shimmer } from '@shimmer-from-structure/solid';

function UserCard() {
  const [isLoading, setIsLoading] = createSignal(true);

  return (
    <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

import { createSignal } from 'solid-js';
import { Shimmer } from '@shimmer-from-structure/solid';
import { UserCard } from './UserCard';

function App() {
  const [loading, setLoading] = createSignal(true);
  const [user, setUser] = createSignal(null);

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

  return (
    <Shimmer loading={loading()} templateProps={{ user: userTemplate }}>
      <UserCard user={user() || userTemplate} />
    </Shimmer>
  );
}

Global Configuration

Use ShimmerProvider to set global defaults:

import { Shimmer, ShimmerProvider } from '@shimmer-from-structure/solid';

function App() {
  return (
    <ShimmerProvider
      config={{
        shimmerColor: 'rgba(56, 189, 248, 0.4)',
        backgroundColor: 'rgba(56, 189, 248, 0.1)',
        duration: 2.5,
        fallbackBorderRadius: 8,
      }}
    >
      <Dashboard />
    </ShimmerProvider>
  );
}

Accessing Config

import { useShimmerConfig } from '@shimmer-from-structure/solid';

function MyComponent() {
  const config = useShimmerConfig();
  return <div style={{ background: config.backgroundColor }}>...</div>;
}

Examples

Dashboard with Multiple Sections

import { createSignal, createEffect } from 'solid-js';
import { Shimmer, ShimmerProvider } from '@shimmer-from-structure/solid';

function Dashboard() {
  // Independent signals for loading states
  const [loadingUser, setLoadingUser] = createSignal(true);
  const [loadingStats, setLoadingStats] = createSignal(true);
  const [loadingTransactions, setLoadingTransactions] = createSignal(true);
  
  // Data signals
  const [user, setUser] = createSignal(null);
  const [stats, setStats] = createSignal(null);
  const [transactions, setTransactions] = createSignal(null);

  // Simulate data fetching
  createEffect(() => {
    setTimeout(() => { setUser(realUser); setLoadingUser(false); }, 1000);
    setTimeout(() => { setStats(realStats); setLoadingStats(false); }, 2000);
    setTimeout(() => { setTransactions(realTransactions); setLoadingTransactions(false); }, 3000);
  });

  return (
    <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