I have the following problem. I have a react application that needs to load a grid of individual small, fixed size images, up to a few hundreds (think a 20x20 grid where each cell is a 100x100 image). There is also a combobox where I can choose different selection options, and each option will need to display a different set of images in the matrix.
Right now, what I do is to have a react component that goes through the current prop with the image ids, and creates a
<img src> tag with the proper URL. This works, but has a few glitches.
One problem is that the image retrieval, for reasons I won't delve into, is slow and will stay slow. It can take up to a minute to get all the images, and this is expected.
The problem is that with the current arrangement, the following happens:
- as soon as the component for the grid is passed a list of image ids, the img tags are added and a set of async requests is spawned for each of the tags. This can take some time to complete, and cannot be interrupted.
- when I change the combobox (potentially with the above operation still not completed), the component prop holding the list of ids changes, each
<img src>tag is changed by react, this spawns new async retrieval of the new set of images.
The final result is that this not only piles up requests, but also ends up creating a strange situation where the grid displays a mixture of old and new images.
I have control of both the server and the client. Provided that the retrieval of the images will be slow, I am wondering if there are better strategies to:
- reduce and control the amount of async requests we perform to retrieve the images, or cancel them, or solve this problem in a different way.
- within react, if there's a way to clear the cells when the props change from one list of image ids to the other, so that the cells are emptied and I don't end up with a mixture of old and new images. React sees the change from one list to the other, and generates the new state, but I need to generate an intermediate state where the
<img>tags are removed, otherwise the old image remains until the new one is retrieved.