A structure-aware skeleton generator that automatically creates responsive shimmer states matching your component's runtime layout.
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.
Frontend developers working with React, Vue, Angular, Svelte, or SolidJS who need to implement loading states without maintaining separate skeleton components.
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.
A structure-aware skeleton loader that mirrors your rendered UI at runtime. Zero layout duplication. Built for modern frameworks.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Provides dedicated adapters for React, Vue, Angular, Svelte, and SolidJS, making it a versatile choice for multi-framework teams or projects transitioning between frameworks.
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.
Uses the `templateProps` feature to inject mock data, ensuring accurate skeleton generation for components that receive dynamic props without requiring separate skeleton components.
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.
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.
Uses synchronous `useLayoutEffect` for DOM measurements, which can block rendering and introduce performance bottlenecks in complex applications with heavy or frequently updating layouts.
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.