[Bug] [Lottie + Tailwind + NextJS 14] Loading.tsx page not displaying Lottie animations

[JoaoGabrielCostaa]

Verify canary release

• 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):

https://github.com/GabrielAtlas/bug-lottie-next

My code:

loading.tsx:

import PoppyLoader from '@/components/poppy-loader'

export default function GlobalLoading() {
  return <PoppyLoader />
}

@/components/poppy-loader.tsx:

'use client'

import { useLottie } from 'lottie-react'

export default function PoppyLoader() {
  const options = {
    loop: true,
    autoplay: true,
    animationData: '../../public/poppy-loading-data.json',
  }
  const { View } = useLottie(options)

  return (
    <div className="w-full h-screen flex items-center justify-center text-center">
      <div className="lottie">{View}</div>
    </div>
  )
}

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

[JoaoGabrielCostaa]

up

[Krisnasw]

up

[JoaoGabrielCostaa]

Up

[glenyRodriguezSM]

up

[shlomie-ornelix]

up

[tnmod]

up

[ekatzenstein]

up

[bada308]

up

[renemundt]

up

[Krisnasw]

up

[PegeDev]

up

[RicardasN]

up

[kMlad]

up

[JoaoGabrielCostaa]

up