[Bug] [Lottie + Tailwind + NextJS 14] Loading.tsx page not displaying Lottie animations #67538
Open
1 task done
Labels
examples
Issue/PR related to examples
Verify canary release
Provide environment information
Which example does this report relate to?
with-tailwindcss
What browser are you using? (if relevant)
Chrome
How are you deploying your application? (if relevant)
No response
Describe the Bug
Hi! i'm trying to display an animation with lottie (https://lottiefiles.com/) using lottie-react as dependency and when i try to put the animation inside the "loading.tsx" file that runs when a page is loading, the lottie animation not shows up.
NextJS Canary version repository (bug reproduced):
https://github.com/GabrielAtlas/bug-lottie-next
My code:
loading.tsx:
@/components/poppy-loader.tsx:
NOTE: When i load the page for the first time or reload the page the animation not shows up but if i put a delay so high like 20000ms inside the await fake promise and save any document, the nextjs hot reload reloads partially the page and the animation of loading.tsx shows up.
See the gif
Expected Behavior
See the lottie animation at loading screen.
To Reproduce
NextJS Latest version
An lottie file .json
Lib lottie-react installed
The text was updated successfully, but these errors were encountered: