A comprehensive library of design-system-aligned patterns for creating skeleton loaders, shimmer effects, and progressive loading states in React applications.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install loading-state-patterns
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install loading-state-patterns using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Loading State Patterns?
Loading State Patterns provides a specialized toolkit for developers looking to move beyond generic loading indicators. These Openclaw Skills offer a collection of reusable components and CSS animations that allow you to build intentional loading experiences that mirror your application's actual content structure. By implementing these patterns, you can significantly improve perceived performance and ensure your user interface remains polished and visually stable even during data fetching.
This skill focuses on aesthetic integration, ensuring that skeleton placeholders match your specific design system. Whether you are building for a standard SaaS platform or a high-end retro-futuristic theme, these patterns provide the necessary primitives to handle content areas, tables, metrics, and even AI-driven streaming content with fluid animations and graceful transitions.
Loading State Patterns Use Cases
- Creating skeleton loaders for complex content areas like product cards and data tables.
- Implementing shimmer animations for async data fetching to indicate active processing.
- Building progressive loading wrappers that transition smoothly between loading states and final content.
- Developing streaming indicators for AI and LLM-driven interfaces to show real-time content generation.
- Designing theme-specific loading states like pulse-glow effects for specialized design systems.
How Loading State Patterns Works
- Identify the specific UI component or layout that requires a loading placeholder.
- Apply the Skeleton Base primitive to define the layout shapes using Tailwind CSS classes.
- Integrate shimmer or pulse-glow animations to provide visual feedback that the application is active.
- Compose complex layouts using specialized patterns like CardSkeleton, TableRowSkeleton, or GridSkeleton.
- Wrap the final data-driven components in a ProgressiveLoad container to manage the transition from skeleton to live data via smooth animations.
- Use the StreamingIndicator pattern for real-time data or LLM responses to keep users engaged during streaming.
Loading State Patterns Setup
To get started with these Openclaw Skills, ensure your project includes Tailwind CSS and Framer Motion. Install the necessary utility dependencies using the following command:
npm install clsx tailwind-merge framer-motion
Then, add the following shimmer keyframes to your global CSS file to enable the core animation patterns:
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.animate-shimmer {
animation: shimmer 1.5s ease-in-out infinite;
}
Loading State Patterns Data Schema & Taxonomy
The skill organizes loading components into a hierarchy of primitives and layout-specific templates. The following table describes the primary data structures used:
| Component | Category | Primary Use Case |
|---|---|---|
Skeleton |
Primitive | Basic shapes, lines, and circles |
CardSkeleton |
Layout | Pre-built card structure with headers and bodies |
TableRowSkeleton |
Layout | Repeating row structure for data grids |
ProgressiveLoad |
Logic | State-based switching between skeleton and children |
GridSkeleton |
Layout | Responsive grid of card or item placeholders |
Loading State Patterns Advanced Features
- Adaptive Shimmering: Configurable animation toggles to match different performance requirements.
- Theme-Aware Skeletons: Specialized CyberSkeleton patterns for non-standard, glowing, or high-contrast design systems.
- Indeterminate Progress Tracking: Support for indeterminate progress bars for background tasks where the duration is unknown.
- Motion Integration: Built-in support for Framer Motion to handle opacity and scale transitions during content hydration.
- Accessibility Guardrails: Best practices for skeleton sizing and timeout fallbacks to prevent permanent loading states.
SKILL.md
Loading
Related Openclaw Skills
Kubernetes Manifest Generator
A specialized skill for generating production-ready Kubernetes manifests including Deployments, Services, and Ingresses with built-in security best practices.
Go Concurrency Patterns
A comprehensive implementation guide for production-grade Go concurrency patterns including worker pools, pipelines, and synchronization primitives.
Game-Changing Features
A strategic product thinking agent that identifies high-leverage improvements to 10x a product's value.
Full-Stack Feature Orchestration
A comprehensive meta-skill that orchestrates the entire software development lifecycle from initial persona research to final production deployment.
Logging and Observability Skill
A comprehensive technical framework for implementing structured logging, distributed tracing, and metrics collection to ensure system reliability.
LP Strategy Comparison
A comprehensive analytical tool for comparing Liquidity Provider strategies across multiple fee tiers, versions, and blockchains.
Featured*
