CodingNic

Connect WeatherNow to the Weather API

Track Loading and Errors

Connect WeatherNow to the Weather API 10 min read

Track Loading and Errors

Task

Add state for request progress and display the prepared loader.

File / section

src/App.jsx and the existing Loader.jsx

Change

Add const [error, setError] = useState(""); and const [loading, setLoading] = useState(false);. Wrap the request with setLoading(true), clear the error before fetching, and setLoading(false) in finally. Render {loading && <Loader />} near the end of the app shell.

Why this change matters

The loader is already styled, so the lesson only wires the state to the existing UI.

Test it

Start the app and verify the build. Later API requests will make the loader visible during network activity.

Checkpoint

WeatherNow now has explicit loading and error state ready for real requests.