Loading demo application...

Context:

This is a demo to show best practices for an autocomplete widget (in React) whose results include an image.

The challenge is the user experience when having to wait for images to load. Each autocomplete result row has an image and some text(s). If your internet connection isn't blazing fast you might have to stare at unloaded images still loading.

Tip! Use your browser developer tools (or switch off Wifi on your phone) to throttle your network speed. Then you will better see what a poor experience it is to see slowly loading images.
Also, note that in this demo, the images are deliberately over-sized by displayed small with CSS. Just to help simulate slow loading images.

Assumptions:

• You want to display the autoresults texts as soon as possible.
• There are too many images, across all possible results, that you can't preload them all.
• Users might type in faster than some images might load.
• It's very possible that a result, and its image, re-appear.
• You want the images to appear with consistent width.