Loading States
Syhrezz uses three loading patterns: skeleton screens for initial page load, spinners for button actions and async operations, and pulse dots for live data indicators.
Skeleton Loading
Skeleton screens are used when a section is loading for the first time. They mimic the shape of the content that will appear — preventing layout shift and communicating progress.
/* CSS */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 6px;
}Spinner
Used in button loading states, async operations, and section-level loading overlays.
Page spinner
Button loading
Outline loading
Live indicator
Live tracking
Rules
| Pattern | When to Use | Duration |
|---|---|---|
| Skeleton | Initial page/section load, data fetch on mount | Until data arrives |
| Button spinner | Form submit, save, delete, any async button action | Until operation completes |
| Page spinner | Full-page async load, route change | Until page ready |
| Pulse dot | Live Location, real-time connection status | Continuous while connected |
AI Implementation Notes
For AI coding assistants: Skeleton elements mimic exact content shape — use matching width/height/border-radius. Table skeletons should show 3-5 skeleton rows matching column widths. Button loading: add
.btn-loading class + prepend spinner element + change label to "Loading..." — do NOT just disable the button. Pulse dots are for persistent live indicators only, not loading states.