Create a Custom Suspending Image Component

InstructorKent C. Dodds

Share this video with your friends

Send Tweet

Now that we know how to preload images, we can create a custom <Img /> component which suspends until the image has been loaded into the browser cache. This way we avoid issues where contents bounce around when the image is loads and ensure that there aren't consistency issues with the data and the image that's displayed.

Viktor Soroka
~ 5 years ago

For me does not work that smoothly on the slow network like on the video. I tried both 05 and 05-extra.1 from the exercises-final. It took time for images to switch after the content already has changed. Also, there are times when content jumps up because it has no image to render. Tested with uncommented window.fetch.restoreOriginalFetch().