Shimmer

Examples

Real-world examples extracted from the working example projects in the repository. Each example demonstrates the same functionality adapted to the framework's patterns.

User Profile Component

A user profile card with avatar, name, email, and status. Uses templateProps to provide mock data during loading.

// Template data for skeleton
const userTemplate = {
  name: 'Sarah Johnson',
  email: 'sarah.johnson@company.com',
  role: 'Software Engineer',
  avatar: 'https://via.placeholder.com/64',
  status: 'offline',
};

// Component
const UserProfile = ({ user }) => (
  <div className="user-profile">
    <img src={user.avatar} alt={user.name} className="user-avatar" />
    <div className="user-info">
      <h2>{user.name}</h2>
      <p className="user-email">{user.email}</p>
      <span className={`user-status ${user.status}`}>{user.role}</span>
    </div>
    <div className={`status-indicator ${user.status}`}>
      <span className="status-dot"></span>
      {user.status}
    </div>
  </div>
);

// Usage
<Shimmer loading={loadingUser} templateProps={{ user: userTemplate }}>
  <UserProfile user={user || userTemplate} />
</Shimmer>

Stats Cards Grid

Display multiple stat cards with values, changes, and trend indicators:

const statsTemplate = [
  { label: 'Total Revenue', value: '$00,000', change: '+0.0%', trend: 'up' },
  { label: 'Active Users', value: '0,000', change: '+0.0%', trend: 'up' },
  { label: 'Conversion', value: '0.0%', change: '-0.0%', trend: 'down' },
  { label: 'Avg. Order', value: '$000', change: '+0.0%', trend: 'up' },
];

const StatsGrid = ({ stats }) => (
  <div className="stats-grid">
    {stats.map((stat, index) => (
      <div key={index} className="stat-card">
        <p className="stat-label">{stat.label}</p>
        <h3 className="stat-value">{stat.value}</h3>
        <span className={`stat-change ${stat.trend}`}>
          {stat.trend === 'up' ? '↑' : '↓'} {stat.change}
        </span>
      </div>
    ))}
  </div>
);

<Shimmer loading={loadingStats} templateProps={{ stats: statsTemplate }}>
  <StatsGrid stats={stats || statsTemplate} />
</Shimmer>

Orders Table

A data table with multiple rows showing customer orders:

const ordersTemplate = [
  {
    id: '1',
    customer: 'Loading Name...',
    product: 'Loading Product...',
    amount: '$000.00',
    status: 'Processing',
  },
  // ... repeat for 5 items
];

const OrdersTable = ({ orders }) => (
  <table className="orders-table">
    <thead>
      <tr>
        <th>Customer</th>
        <th>Product</th>
        <th>Amount</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {orders.map((order) => (
        <tr key={order.id}>
          <td>{order.customer}</td>
          <td>{order.product}</td>
          <td>{order.amount}</td>
          <td>
            <span className={`status ${order.status}`}>
              {order.status}
            </span>
          </td>
        </tr>
      ))}
    </tbody>
  </table>
);

<Shimmer loading={loadingOrders} templateProps={{ orders: ordersTemplate }}>
  <OrdersTable orders={orders || ordersTemplate} />
</Shimmer>

Team Members Grid

Display team members with avatars in a grid layout:

const teamTemplate = [
  { id: '1', name: 'Loading...', role: 'Role', avatar: 'https://via.placeholder.com/40' },
  { id: '2', name: 'Loading...', role: 'Lead Developer', avatar: 'https://via.placeholder.com/40' },
  { id: '3', name: 'Loading...', role: 'Role', avatar: 'https://via.placeholder.com/40' },
  { id: '4', name: 'Loading...', role: 'Backend Developer', avatar: 'https://via.placeholder.com/40' },
];

const TeamMembers = ({ members }) => (
  <div className="team-members">
    <h3 className="section-title">Team</h3>
    <div className="members-grid">
      {members.map((member) => (
        <div key={member.id} className="member-card">
          <img src={member.avatar} alt={member.name} className="member-avatar" />
          <p className="member-name">{member.name}</p>
          <span className="member-role">{member.role}</span>
        </div>
      ))}
    </div>
  </div>
);

<Shimmer loading={loadingTeam} templateProps={{ members: teamTemplate }}>
  <TeamMembers members={team || teamTemplate} />
</Shimmer>

Live Examples

Check out the full working examples in the repository. Each example is a complete dashboard application with multiple sections loading independently:

  • React Example - Complete dashboard with user profile, stats, charts, tables, and Suspense integration
  • Vue Example - Dashboard using Vue 3 Composition API with reactive refs
  • Svelte Example - Dashboard with Svelte 5 runes ($state, $props)
  • Angular Example - Dashboard using Angular 19 signals and standalone components
  • SolidJS Example - Dashboard with SolidJS reactive primitives (createSignal, For)

All examples demonstrate the same features: independent loading states, template props for dynamic data, custom shimmer colors, and global configuration.