Step 5: Polish

Refine the experience.

Where We Are

The app works. Now make it feel good.

Improve the Loading State

While weather data is loading:
- Show a subtle loading spinner or skeleton cards
- Disable the search button to prevent double-clicks
- Clear the old data before showing new results

Add Keyboard Support

Make sure pressing Enter in the search input triggers the search.
Focus the input when the page loads so you can start typing immediately.

Visual Polish

Refine the design:
- Add a subtle gradient or background that hints at the weather
- Make the current temperature really prominent — big and bold
- Add smooth transitions when data loads
- Style the forecast cards with a hover effect
- Make the temperature unit toggle look polished

Handle Edge Cases

Handle these situations gracefully:
- Empty search input — don't fetch, show a hint
- Very long city names — truncate or wrap
- Network errors — show a friendly retry message
- No results — "City not found. Try another name."

Checkpoint

By now you should have:

• Smooth loading states
• Keyboard support
• Polished visuals
• Edge cases handled

What You Learned

• Loading states improve perceived performance
• Small details (focus, keyboard, transitions) make apps feel professional
• Edge cases separate working apps from good apps

Exercises

1. Paste the "Improve the Loading State" and "Add Keyboard Support" prompts, then search a city and confirm the spinner shows, the button disables, and pressing Enter triggers the search.
2. Paste the "Visual Polish" prompt and review the result as a designer — note one detail (transition, hover, prominence) you'd push further.
3. Paste the "Handle Edge Cases" prompt, then deliberately trigger each case (empty input, a very long name, a not-found city) and confirm each shows a helpful message.