Skeletons animations are not working in the latest Chrome version

[varayoudfederico]

What did you do?

Opened the examples page: https://skeletonreact.com/#gallery in Chome latest version (122.0.6261.58).

What did you expect to happen?

The skeletons animate correctly.

What happened actually?

The skeletons are not animating, they remain static.

Which versions of react-content-loader, and which browser are affected by this issue?

Locally we use React 18.2.0 and version 6.2.1 of the library. But the issue can be replicated in the examples page.

[dakioso]

Same here! And i'm running on a bit newer Chrome version: 122.0.6261.69

[marjon4]

+1

[azzinijuli]

I'm having the same issue with Chrome v 122.0.6261.70

[ekkotest]

me too

[Cow258]

I got same issue on Chrome 122.0.6261.69 (arm64)

Chrome 122.0.6261.69 (arm64)

Safari 17.3.1（19617.2.4.11.12）

[GauthierWillemse]

+1

[jwebbvalent]

+1

[Roeefl]

We're having the same issue on Brave since updating from v1.62 to v1.63 (Released Feb 28, 2024), which includes chromium upgrade to 122.0.6261.94

[jabranrafique]

Not animating for me on MS Edge Version 122.0.2365.59

[shimi-kuperli]

+1

[Roeefl]

@danilowoz we need you responding here or people gonna start forking.

[Roeefl]

I love David Bokan and his Chromium changes

https://chromium.googlesource.com/chromium/src/+/a1f3b8804d221a3c503224c6b558eb19df29e9a0

[danilowoz]

Hello everyone! Unfortunately, this seems to be a breaking change introduced in the Chromium animation API that react-content-loader heavily relies on. There must be a valid reason for the Chromium team to implement such a change, and the only solution is to find an alternative approach to keep this library running.

I can't promise a timeline, as this is a challenging issue and I've been busy with my usual work on CodeSandbox. But if anyone finds a good solution I will make sure to review it as soon as possible and get it merged 🙏

[Roeefl]

Thanks a lot for the update @danilowoz will keep you updated if we come up with anything

[Roeefl]

@danilowoz We've tried to figure this out and indeed this seems to be a breaking change in Chromium regrading animations for linear-gradients only (I think).

For the meanwhile, we've cloned the Svg.tsx file from your repo (thank you!) and simplified it to have it's opacity animated rather than a gradient, just to keep our Production content loaders giving a loading indication.

If this might help you in any way, this is our forked file: https://gist.github.com/Roeefl/af6e9192aee30c4c120101b70f7f8837

[danilowoz]

I think I've found an alternative! Is someone up to review and look for inconsistency? I'm pretty sure we will end up deprecating some props, btw