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

Why this is a good first issue

Lottie animation fails to display in Next.js loading component.

AI Summary

The issue involves Lottie animations not displaying in a Next.js loading.tsx component, potentially due to client-side rendering or timing issues. The problem is reproducible but requires understanding of both Lottie and Next.js rendering behavior. The unclear part is why the animation works with a delay but not during initial load.

Issue Description

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 nex

GitHub Labels

examples