peterbe/autocomplete-with-images

The absolute best way to load and include images in a React autocomplete result display

autocomplete-with-images's Issues

Preload HTTP headers when the autocomplete is XHR based

The demo in this repo uses a known/fixed local list of possible search results for the image URLs.
In a more realistic app, the user types something (e.g. "ca"), which triggers an XHR request like fetch('/api/search?q=ca)`.

Can the XHR response contain headers that tells the browser to start downloading the URLs as soon as the await response.json() happens?

Deliberately delay not-yet-loaded images

Only Chrome supports navigator.connection.effectiveType to detect slow network
One thing we could do is measure how long it took for the lazyLoadImage to download. If it took >200ms just to download that little PNG we can leverage this going forward.

The demo in this repo, currently, reacts immediately to every keystroke. That means there's a lot of times when an images starts preloading immediately, just to find out that the component dismounts and now we need to cancel the preload.

An interesting option would be to delay a little bit. Like "Are you absolutely sure we're going to need this image? If you can wait 300ms, I'll believe you."

Use XHR to preload images instead?

@stereobooster tells me Safari doesn't support cancelling preloading images by setting the .src = "". An alternative is to use XHR and Abort the request.

Add throttling to demo

It's unrealistic to have an autocomplete that reacts immediately on every key stroke.

Move 'dismounted' mutable *inside* the effect

At the moment the dismounted mutable boolean is scoped outside the useEffect().

In the official React documentation for Hooks there's a demo that uses a similar pattern and they put it (calling it ignored) inside the useEffect().

Make demo mobile friendly

Not critical to the core idea but it's hard to live with a mobile web app that looks that terrible.