1.8 KiB
1.8 KiB
Loading Spinner Overlay
Overview
Add a reusable loading spinner overlay component with a circular progress indicator, and apply it across all pages that currently show plain "Loading..." text.
1. Create LoadingSpinner.svelte
New file: frontend/src/components/common/LoadingSpinner.svelte
- Semi-transparent backdrop overlay covering the component area
- Centered card with CSS-animated circular spinner + configurable message
- Props:
message(string, default "Loading..."),overlay(boolean, default true - if false, inline without backdrop) - Dark mode support using existing
:global(.dark-mode)pattern - Pure CSS animation (no JS dependencies)
2. Apply to Dashboard
File: frontend/src/components/Dashboard/Dashboard.svelte
- Replace
<div class="loading">Loading dashboard data...</div>with<LoadingSpinner message="Loading dashboard..." />
3. Apply to other pages
Replace all <div class="loading">...</div> blocks:
| File | Current text | New message |
|---|---|---|
Dashboard.svelte |
"Loading dashboard data..." | "Loading dashboard..." |
AtmList.svelte |
"Loading ATMs..." | "Loading ATMs..." |
IncidentList.svelte |
"Loading incidents..." | "Loading incidents..." |
FleetTasks.svelte |
"Loading tasks..." | "Loading tasks..." |
JournalEvents.svelte |
"Loading events..." | "Loading events..." |
AtmHistory.svelte |
"Loading incidents..." | "Loading incidents..." |
4. Remove old .loading CSS
Remove the plain-text .loading class from Dashboard.css and any other standalone CSS files where it's replaced.
Verification
cd frontend && npm run build- no errors- Visual check: spinner appears centered with backdrop on each page during load
- Dark mode: spinner card and backdrop adapt correctly