42 lines
1.8 KiB
Markdown
42 lines
1.8 KiB
Markdown
# 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
|