Shimmer

Best Practices

Learn how to get the most out of Shimmer From Structure. These guidelines are divided into universal principles that apply to all frameworks and specific implementation details for each adapter.

Universal Guidelines

These practices apply regardless of which framework you are using.

1. Always Provide Template Props

When your component receives data via props, always provide templateProps with mock data that matches the expected structure. This allows the library to render your actual component with mock data to generate the skeleton.

2. Match Template Structure to Real Data

Ensure your template data has the same array length and property structure as real data. If your real data has 5 items, your template should also have 5 items to prevent layout shifts when data loads.

3. Use Independent Shimmer Components

Wrap separate logical sections (e.g., Sidebar, Feed, Header) in their own Shimmercomponents. This allows parts of your UI to load independently, improving the perceived performance.

4. Define Container Dimensions for Async Content

If a component loads content asynchronously (like a chart or lazy-loaded image) or has no initial dimensions, wrap it in a container with explicit width and height. This ensures the shimmer effect has a layout to measure immediately.

5. Use Global Configuration

Set a global theme (colors, duration, border radius) at the root of your application to maintain consistency and avoid repeating props.

Framework-Specific Details

React

  • Suspense Integration: Shimmer works automatically as a Suspense fallback.
  • Memoization: Wrap your fallback component in React.memo to prevent unnecessary re-renders during parent updates.
  • Measurement: The library uses useLayoutEffect internally to measure the DOM synchronously before the browser paints, preventing flicker.

Vue

  • Composition API: Use ref for reactive loading states.
  • Global Config: Use provideShimmerConfig at your app root (e.g., in App.vue) to set global defaults.

Svelte

  • Reactivity: Works with both Svelte 5 Runes ($state) and legacy stores/variables.
  • Global Config: Use setShimmerConfig in your root component's initialization script.

SolidJS

  • Signals: Use createSignal for loading states.
  • Suspense: Compatible with Solid's Suspense component for async resources.

Angular

  • Signals: The library is designed to work seamlessly with Angular Signals for loading states.
  • Dependency Injection: Use provideShimmerConfig in your application config or root module to set global styles.

Performance Considerations

  • Measurement happens only once when loading is true.
  • Zero-dimension elements (display: none) are skipped.
  • The library uses native APIs (ResizeObserver, getComputedStyle) for efficiency.