# 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