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
- Notice that we've added a version query parameter to the images to simulate initial loading. This is why you see a different versions in the URL for each image.
- Throttle your network speed in the dev tools to "Slow 3G"
- Click a separate ship
π¨ While you're here, make sure you have
Disable cache unchecked in the
Network tab of dev tools. Otherwise, the browser will ignore your preloaded
image and try to re-fetch it, bypassing your solution.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.The emoji will guide you through this one.
Best to start in . Lots of this will feel similar
to what we were doing with the
getShip regarding the caching stuff!π¨ Note, this is extremely difficult to test, so the test may be unreliable.
However, if you do throttle the network, then the test will be much more
reliable.