Weird Next Image behaviour
Hey,
I'm currently building a gallery that has pagination and the expected behaviour is to display a loading state on the images while they are loading. This works fine on the first page load (https://gyazo.com/b80b2b18a58abd0c089f3ade111a4235), but doesn't when I switch between the pages as seen here: https://gyazo.com/5d1b1e86f116e71f43ee208f02ae8c3f
Any idea why that is?
Gyazo
Gyazo
10 Replies
can you show the key what you are using for the elements?
the way i have this implmeneted atm is that an array with all images is fetched, then the first 9 are passed down to the grid component, which basically just maps my image component in a grid and whenever the page changes i pass down the next 9 images and so own
Oh that is actually a great idea
one sec
yeah that fixed it
mb
Thanks a lot
where you using the index as a key?
plain index
yeah
bad idea
oh
yea
usually i do something with
i just use the index from the original array now
something-${index}
so image 10 has key 10 instead of 1
yeah
the issue is around indexes
because when you change the page
you still have 10 elements
from 0 to 9 in indexes
you can force the key as the avatar url
or something like
if you really need some better key
Napoleon
Kindacode
3 Ways to Generate Random Strings in Node.js - Kindacode
This article walks you through 3 different ways to generate a random string in Node.js. The first two approaches only use self-written code and utilize