x-intersect messes with unshift() & item order

[quasipickle]

I'm not sure how much more generic I can make this, but in my use case, I have an array of photo urls. I use Alpine to x-for over the array to create <img /> tags. Each image has an x-intersect property that copies data-src to src - standard lazy-loading stuff.

The problem is that when I add a new url to the list with unshift(), the loop adds another copy of the last photo to the end of output, rather than adding the new photo to the beginning. However, when I scroll the elements off screen, then back on, the list looks ok.

You can see an example here: https://codepen.io/quasipickle/pen/GRmzyWV

So it would appear x-intersect doesn't trigger when an element is created that is immediately intersecting the viewport. Is this a problem with x-intersect or is it just the behaviour of IntersectionObserver?

[SimoTod]

None of them, the problem is with x-for. your x-for is keyed by numeric index so when it repaints it updates existing elements. You need to use a unique reference that is bound to the entry, try using the url for example. In general, keying by index always leads to bugs if your list is meant to change. (also if you want to key by index :key="index" is redundant since it's the default behaviour

[SimoTod]

See https://codepen.io/SimoTod/pen/KKmJQQx

[quasipickle]

Ah, that makes sense. Thanks for the tip.