How do I use Shimmer From Structure with dynamic data in React?

Use the `templateProps` prop to pass mock data that matches your component's expected structure. This allows the shimmer to measure and generate loading states accurately, as shown in the dynamic content examples for React and other frameworks.

Shimmer From Structure vs React Loading Skeleton: which is better for my project?

Shimmer From Structure excels at automatic, maintenance-free skeletons that adapt to layout changes, while React Loading Skeleton offers pre-styled components but requires manual updates. Choose based on whether you prioritize automation over control and pre-built styles.

Can I customize the shimmer animation colors and speed?

Yes, you can customize colors via `shimmerColor` and `backgroundColor` props, and adjust speed with the `duration` prop. Global configuration through providers (e.g., `ShimmerProvider` in React) allows setting defaults across your app.

Does Shimmer From Structure work with Vue 3 and the Composition API?

Yes, it has a dedicated Vue adapter (`@shimmer-from-structure/vue`) that supports Vue 3 and the Composition API, with examples provided in the README for static and dynamic content usage.

What are the performance implications of using Shimmer From Structure?

Performance can be impacted by synchronous DOM measurements using `useLayoutEffect`, which may block rendering. The README notes this happens only when loading changes, but complex layouts or frequent updates could cause jank.

How to set up global theming for shimmer effects?

Use framework-specific providers like `ShimmerProvider` in React or `provideShimmerConfig` in Vue to set default colors, duration, and border radius. This ensures consistent loading states without repeating props, as detailed in the Global Configuration section.

Open-Awesome

shimmer-from-structure

MITTypeScriptv2.4.6

A structure-aware skeleton generator that automatically creates responsive shimmer states matching your component's runtime layout.

Visit Website GitHub

1.1k stars18 forks0 contributors

What is shimmer-from-structure?

Shimmer From Structure is a skeleton loading library that automatically generates shimmer effects by measuring your component's runtime DOM structure. It solves the problem of maintaining duplicate skeleton components by creating loading states that perfectly match your actual UI layout, including dimensions and CSS properties like border-radius.

Target Audience

Frontend developers working with React, Vue, Angular, Svelte, or SolidJS who need to implement loading states without maintaining separate skeleton components.

Value Proposition

Developers choose Shimmer From Structure because it eliminates the maintenance burden of traditional skeleton libraries—no manual creation of skeleton components, automatic adaptation to layout changes, and perfect visual matching of the actual UI.

Overview

A structure-aware skeleton loader that mirrors your rendered UI at runtime. Zero layout duplication. Built for modern frameworks.

Use Cases

Best For

Implementing loading states in dashboards with multiple independent sections
Creating skeleton screens for dynamic data components like user profiles or data grids
Building applications with complex nested component structures
Maintaining consistent loading animations across React, Vue, Angular, Svelte, and SolidJS projects
Using with React Suspense for seamless fallback rendering
Applications where UI layouts frequently change and skeleton maintenance would be burdensome

Not Ideal For

Projects relying on server-side rendering with minimal or no client-side JavaScript execution
Applications with highly dynamic, async components that lack explicit container dimensions (e.g., charts or lazy-loaded widgets)
Teams needing pre-styled, drop-in skeleton components without any runtime measurement or setup overhead
Performance-critical applications where synchronous DOM measurements during loading could cause rendering jank

Pros & Cons

Pros

Cross-Framework Compatibility

Provides dedicated adapters for React, Vue, Angular, Svelte, and SolidJS, making it a versatile choice for multi-framework teams or projects transitioning between frameworks.

Automatic Layout Adaptation

Measures DOM structure at runtime to generate shimmer effects that match component dimensions and CSS properties like border-radius, eliminating manual skeleton maintenance as highlighted in the 'Why This Library?' section.

Dynamic Data Support

Uses the `templateProps` feature to inject mock data, ensuring accurate skeleton generation for components that receive dynamic props without requiring separate skeleton components.

Visual Continuity Preservation

Renders components with transparent text instead of hiding them, keeping container backgrounds visible during loading for better visual flow, as explained in the 'How It Works' section.

Cons

Async Component Limitations

Admits in the 'Known Limitations' that async components (e.g., charts) may need explicit container dimensions, and elements with zero dimensions or 'display: none' won't be captured, reducing effectiveness for certain UIs.

Performance Overhead

Uses synchronous `useLayoutEffect` for DOM measurements, which can block rendering and introduce performance bottlenecks in complex applications with heavy or frequently updating layouts.

Limited SVG and SSR Support

Only captures outer SVG elements, not internal paths, and relies on client-side JavaScript for measurement, making it unsuitable for server-side rendered content without client hydration.

Frequently Asked Questions

Related Projects

ngx-progressbar

Angular progress bar ☄

Stars1,054

Forks105

Last commit4 months ago

ngx-loading-bar

Automatic page loading / progress bar for Angular

Stars787

Forks82

Last commit6 months ago

angular-svg-round-progressbar

Angular module that uses SVG to create a circular progressbar

Stars741

Forks176

Last commit9 months ago

ngx-skeleton-loader

Make beautiful, animated loading skeletons that automatically adapt to your Angular apps

Stars623

Forks53

Last commit9 days ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub