danilowoz / react-content-loader

⚪ SVG-Powered component to easily create skeleton loadings.

Home Page:https://skeletonreact.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SSR matching of fill url

pdrbrnd opened this issue · comments

Using react-content-loader with SSR (in this case with Next.js) I'm getting the warning:

Warning: Prop `style` did not match. Server: "fill:url(#yu80c54k1c8)" Client: "fill:url(#zhqtwhb70bm)"

Any workaround?

Thanks!

Hey, thanks for notifying me... But, it doesn't sound good!

Which version are you using? The lastest? Because recently I changed the approach that I used to generate these ids and... BTW I can't see a solution now because these ids are generated runtime, you know?

@dleitee do you have any idea to solve this?

Well, I read a few issues about it on React core and I didn't find any great solution...
I thought to use the key but it isn't able inside the component, then I created the propkey.
I'm not sure if it's an elegant solution, but that's solved!

Look on the #79, let me know what you think.

Hey @danilowoz, I'll test it here and try to fix it.

@danilowoz you generate the id at runtime with uid so the only approach I can think of to solve this problem is the one you have at #79

I guess it should work.

Nice job with this package btw 👍

Hey @pbrandone
I published a new version with a new prop uniqueKey which you can use like a "key".

Just be careful when you'll update the version because in the lasted version I changed the API

Feedback me if it works :)
Thanks, see ya

works perfectly @danilowoz. thanks a lot!

it works!

but uniqueKey not uniquekey @danilowoz

@danilowoz how about to use react-id-generator for this issue? This example shows how to reset id on server

Hey @pbrandone
I published a new version with a new prop uniqueKey which you can use like a "key".

Just be careful when you'll update the version because in the lasted version I changed the API

Feedback me if it works :)
Thanks, see ya

It's don't work.

Hey @sirKrymov, which error are you getting?
Have you tried uniqueKey? With k uppercase? The API has changed on v5

Let me know how I can help you.