[X] I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Available memory (MB): 16240
Available CPU cores: 16
Binaries:
Node: 18.20.2
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant Packages:
next: 14.2.4 // Latest available version is detected (14.2.4).
eslint-config-next: 14.2.4
react: 18.3.1
react-dom: 18.3.1
typescript: 5.5.3
Next.js Config:
output: N/A
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):
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
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![estranho](https://github.com/vercel/next.js/assets/35508935/39733f0f-08ca-4878-82c2-00e7938904a3)
Expected Behavior
See the lottie animation at loading screen.
To Reproduce
NextJS Latest version An lottie file .json Lib lottie-react installed