digdir / designsystemet

Designsystemet
https://designsystemet.no
MIT License
85 stars 38 forks source link

Does Skeleton need useSynchronizedAnimation? #2316

Open eirikbacker opened 3 months ago

eirikbacker commented 3 months ago

Today, we have the useSynchronizedAnimation hook to make sure all animations are synced to play in sync. For skeleton loaders, this means fading animation will always be in sync, regardless of when elements are added or removed.

Often when creating a skeleton screen though, most elements are rendered at the same time anyway, meaning this code to synchronize animations is redundant. Only if a skeleton section is added later, the animations will be unsynced, but considering this is not a very prominent animation, we might consider wether it is important to have synced?

Futhermore, some brands maybe even want to add some delay/staggering effect to their skeleon loaders: example from Gjensidige. This is not possible when Javascript goes in and overrides what is set by CSS.

Lastly, using useSynchronizedAnimation means we need Javascript to render something, that could have been reliant on CSS only, and thus being much more performant and framework independent.

Therefore, I suggest we reconsider wether synced Skeleon animation is worth the extra complexity?

mrosvik commented 3 months ago

Should be discussed later in the team