#GetServersideProps image hydrate takes long, and not able to show spinner properly

9 messages · Page 1 of 1 (latest)

livid finch
#

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.

clear bloomBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

wintry mauve
#

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 cards

livid finch
#

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.

wintry mauve
#

and that is the reason why you have lint rules screaming at you that using index as key = bugs more often than not

livid finch
#

thanks for the help!