GetServersideProps image hydrate takes long, and not able to show spinner properly
Answered
Polish posted this in #help-forum
PolishOP
Hi,
So i'm fetching a bunch of products using getServersideProps. It works fine, but the images sometimes take awhile to update in the HTML cards that are displaying them. The problem is that because the page updates the dom without reloading the page, the old images stay in place from the previous cards until the new images have been fully downloaded.
It would be much better if this could flush the old ones while the new ones are loading, but i'm not sure how to do that.
So i'm fetching a bunch of products using getServersideProps. It works fine, but the images sometimes take awhile to update in the HTML cards that are displaying them. The problem is that because the page updates the dom without reloading the page, the old images stay in place from the previous cards until the new images have been fully downloaded.
It would be much better if this could flush the old ones while the new ones are loading, but i'm not sure how to do that.
Answered by Shy Albatross
The question isn't totally clear to me honestly, but if I do understand correctly what you want to achieve, then use
key prop on the elements that's linked to the image source maybe? That way you will explicitly instruct React to rerender the cards7 Replies
Shy Albatross
The question isn't totally clear to me honestly, but if I do understand correctly what you want to achieve, then use
key prop on the elements that's linked to the image source maybe? That way you will explicitly instruct React to rerender the cardsAnswer
PolishOP
key prop on the IMAGE sources?
Yeah, so what's happening is... The initial page loads, creates all the cards. Loads all the images. When I paginate, since the page doesn't completely refresh, and it instead does an ajax. It updates all the cards with the new data. That new set of data images take a little bit of time to load, and because of that, it ends up not updating the old image until the new image is fully loaded.
Oh, the key thing achieved the trick. I was using the index of the array as the old key. But I gave every item a unique key and its working great.
Shy Albatross
and that is the reason why you have lint rules screaming at you that using index as key = bugs more often than not
@Shy Albatross and that is the reason why you have lint rules screaming at you that using index as key = bugs more often than not
PolishOP
Guess my linter never caught it 😦
thanks for the help!