Bug in the React 18 - Video Game Discovery App

Hi! I have been watching the “React 18 for Beginners” course and couldn’t understand how the actual images are fetched/downloaded from the server. So, I investigated it and learned. Then, I discovered a bug in the section “Project: Building a Video Game Discovery App (3h)” - " 15- Improving User Experience with Loading Skeletons". I haven’t tried it by myself but I think if we turn off the browser caching, the loading skeletons doesn’t work. With Mosh’s implementation, if the browser caching is turned off, then the loading skeletons should disappear without waiting for downloading the actual images from the server.

So, we need to handle the element’s “onLoad” event.

Am I correct?

Can anyone correct me if I am wrong?

I am coding along in the same React course and cannot get the skeletons to display at all in the lesson “Improving User Experience with Loading Skeletons” as showed by the instructor. in the video
I am using identical code as compared to the commit in the GitHub - mosh-hamedani/game-hub repo. Any help to solve this issue is most welcome.

My bad! It turned out that I made a mistake when coding along after all… I put one of the calls to setLoading() in the useGames hook in the wrong place:

            .catch((err) => {
                setLoading(false) // This is my bad, the call to setLoading must be made after if statement
                if (err instanceof CanceledError) return
                // setLoading should go here in order for skeletons to display
1 Like