Design the empty, zero-result and offline states

[AnayDhawan]

Problem

Filter down to something with no matches and you get a blank area with no explanation and nothing to do next. Load the app offline and it is similarly unclear what happened.

Where to start

• src/components/map/ - the results list and map
• public/sw.js - the service worker already exists, so something is cached; the UI just never says what

What to build

Zero results: say what was filtered out, offer a one-click way to clear filters, and offer to contribute the missing place. This is our best contribution prompt: someone searching for a place we do not have is exactly the person able to add it.

Empty city: on a city page with no places, invite a contribution for that city specifically.

Offline: explain what is available from cache and what is not.

Loading: skeletons that match the final layout, so the page does not jump when data arrives.

Acceptance criteria

• Zero-result state names the active filters and offers to clear them
• Zero-result state links to the contribution flow
• Offline state distinguishes cached content from unavailable content
• Loading skeletons do not cause layout shift
• All four states work in light and dark mode

Verifying

npm install
npm run dev

Filter to something nonsensical for the zero-result case. Use Chrome DevTools "Offline" for the offline case. Use network throttling to see the loading state.

Scope: small to medium, roughly 2 hours. Mostly UI work, no complex logic. Good first issue.

New to the repo? Start with CONTRIBUTING.md.