davidhu2000 / react-spinners

A collection of loading spinner components for react
https://www.davidhu.io/react-spinners
MIT License
3.01k stars 261 forks source link

fix server side render style mismatch on hashloader #533

Closed davidhu2000 closed 1 year ago

davidhu2000 commented 1 year ago

What changes are introduced?

fixes #531. The content style is causing a mismatch between server/client styles.

position:absolute;
- content:;
top:50%;
left:50%;
display:block;
width:10px;
height:10px;
border-radius:5px;
transform:translate(-50%, -50%);
animation-fill-mode:none;
animation:react-spinners-HashLoader-before 2s infinite"

The client-side style includes content: "", but looks like the server-side removes it. It seems like this style isn't adding any value, so removing it seems like the best option.

Any screenshots?

Screen Shot 2022-07-29 at 9 24 31 PM
liby commented 1 year ago

but looks like the server-side removes it. It seems like this style isn't adding any value,

Excuse me. Why does this kind of behavior occur?

davidhu2000 commented 1 year ago

I'm not 100%, but my guess is nextJs optimizes the style and removed any that has an empty value.

Given that content:"" doesn't really add anything