Finish Wishlist Loading and Empty States

Make /wishlist communicate its state clearly while the browser restores ids, while movie requests are in flight, and when there are no saved movies.

Step 1 — Show skeletons while the page is not ready

Before the wishlist ids have been restored, keep the skeleton grid visible. Reuse the existing skeleton card class so the loading treatment matches the application’s visual language.

Step 2 — Handle an empty wishlist separately

Once ready is true, if ids.length === 0, clear the movie list and stop loading. Render the existing empty state instead of an empty grid.

Step 3 — Finish the request lifecycle

Reset loading and error whenever the ids change. Keep a cancellation flag in the effect so a late response cannot update the page after it has been replaced or unmounted.

let cancelled = false;

Use the cleanup function to mark it cancelled before the effect exits.

Checkpoint

Verify three states: a fresh empty wishlist, a wishlist with saved movies, and a refresh while saved ids are restoring. Each should show the appropriate skeleton, empty message, or movie grid.