I'm building a simple container that displays a collection of GIFs, and I've encountered an unexpected behavior when trying to dynamically render GIFs based on the selected category. Here's a snippet of the code I'm working with:
{#each imagesByCategory[selectedCategoryIndex] as image (image.Key)}<div><ImageElement src="cdn.digitaloceanspaces.com/{image.Key}" /></div>{/each}So basically, it just reiterates and re-renders each image when the categoryIndex changes.
Initially it renders all images in the right order, from top to bottom, from 01.gif to 15.gif. However, when I switch to a different category, I can see in the Network tab the GIFs are being requested and loaded in the wrong order. For example, instead of loading them sequentially (e.g., 1.gif, 2.gif, 3.gif), they're loaded in reverse order (e.g., 32.gif, 31.gif, 30.gif).
The weird part is that during both the initial page load and when switching categoryIndexes, all the images are correctly displayed on the UI. However, when swicthing categoryIndexes and inspecting the Network tab, I noticed that the images are requested and loaded in reverse order (e.g., 32.gif, 31.gif, 30.gif). I also tried logging the indexes of each image as they're iterated through. Interestingly, during the initial page load, the indexes are logged in the correct order. However, when changing the [selectedCategoryIndex], while the images are rendered correctly, the logged indexes are in reverse order. Consequently, the user experience involves waiting for images to load from bottom to top instead of the intended top to bottom loading.
I'm relatively new to web development, so I might be overlooking something crucial here. The array that the loop iterates through is 100% structured correctly, so I'm a bit stumped as to what might be causing this issue.
Any insights on how to troubleshoot would be greatly appreciated!
Here is the screenshots to visualize the problem: