Img Component
Loading "Img Component"
Run locally for transcripts
๐จโ๐ผ Our users have noticed this annoying behavior. Here's how you reproduce it:
- Set the playground to this exercise
- (in a separate tab)
- Open the dev tools
- Right-click the refresh button and select "Empty Cache and Hard Reload"
- Throttle your network speed in the dev tools to "Slow 3G"
- Click a separate ship
You should notice the network loads the data for the ship. While that happens,
our pending state is shown (great job on that again). Once the data is loaded,
the component re-renders with the new data (even the
img src gets updated
properly). However, the img is still loading. This is because the browser
waits for the new image src to be loaded before switching to the new image.Our users are confused by this, and that's what we need you to solve using
Suspense, the
use hook, and a preloadImage utility.