Animation isn't happening till entire page loads

[mouryareddy]

The animation should happen as soon as possible. Instead, it is happening after the entire page is loaded. Till the entire page loads, It's static.

[fandiario]

Have some problem with this. I'm using next js and also set SSR to false... Wonder where did i go wrong...

and my skeleton loader

I'm using next 11.0.1 and react-content-loader 6.0.3

[kalinkochnev]

I had the same issue. First make sure that you don't have any blocking function calls, but I think the issue has to do something with the use of svg animations vs css. I had other css animations that were working fine, but this package got hung until the async functions finished.

[mouryareddy]

I am using a fetch call , and loading this till I get result. Do you have that CSS property handy so that I could add it.

[kalinkochnev]

I am using a fetch call , and loading this till I get result. Do you have that CSS property handy so that I could add it.

Sorry I probably didn't explain what I meant clearly. I was only saying that css animations appear to work while the page is loading, but the SVG ones do not, so the issue is related to the SVG animations. I haven't figured the issue out either.

I don't think there's a good way to fix it without drastically changing the SVG animations, but for a temporary fix, you could make some css classes that have a similar effect and style the rect tags, while disabling the animate prop.

[RohithBhandaru]

I'm also facing similar issue. I have a screen which has a graph with large data and a list with corresponding data points to be rendered. I wanted to place content loader while the graph screen gets rendered. However, the content loader animation doesn't even start before the graph screen gets rendered. I'm new to react native.

Am I missing something here? Any help is appreciated.

[hubsmoke]

Also having this issue, I think it's related to browsers not prioritizing SVG animations. If this is correct, this project should offer a CSS solution by overlaying 2 SVGs and using an animation on the css mask-position to simulate the loading animation. I may cook this up as a PR if I don't find another solution.

My target platform is web BTW. I am not planning on using this for React Native

EDIT: I have decide to use this instead, which animates without delay https://github.com/dvtng/react-loading-skeleton I do like the tooling for react-content-loader project better (ability to customize skeleton layout with a UI) but the animation delay problem renders it unusable for me. This seems to be a new problem, it was working perfectly at one point, but perhaps browser support changed in webkit.

[cwveysey]

Also having this problem -

[kostas64]

Same problem. animation takes tool long before start

[nenorrell]

Also having this issue. It's problematic when using this as a fallback for Suspense components, as there is no animation since it doesn't animate until the page loads (at which point, the fallback is no longer needed)

[27shutterclicks]

Same here, svg and lottie animations weren't animating until async data fetches complete, so I couldn't get this component to work - on Next.js with SSR. I switched to react-loading-skeleton, thanks to @hubsmoke 's suggestion above and it's working great.