Connect the Loading Lifecycle

Task

Ensure the loading overlay is visible for the entire request and is always reset afterward.

Open

In fetchWeather(), call showLoader(true) before try, and keep showLoader(false) in finally.

Implementation

showError("");
showLoader(true);

try {
  // current request
  // forecast request
  // render
} catch (error) {
  showError(error.message);
} finally {
  showLoader(false);
}

finally runs whether the request succeeds or throws. That makes it the right place to clear a temporary UI state that must never remain stuck.

Test

Use DevTools network throttling if available, then search for a city. The loader should remain visible during the delayed request and disappear afterward.

Expected result

The loader accurately reflects the request lifecycle.

Checkpoint

Before moving on, confirm the expected result in the running app and make sure the browser console has no blocking errors.