Loading and errors

A fetching animation shows nothing, and a failed one shows nothing forever. One overlay covers each gap.

While it loads

Render <LottieLoading> among the children and it appears during the loading state:

import { Lottie, LottieDisplay, LottieLoading } from "lottie-react";export function LoadingOverlay() {  return (    <Lottie src="/anim.json" autoplay loop>      <LottieDisplay />      <LottieLoading showAfter={0} />    </Lottie>  );}

By default it waits 400ms before appearing, so a fast load never flashes a spinner; showAfter={0} shows it at once.

The spinner takes its color and size from the surrounding text. Under a reduced-motion preference it turns at half speed instead of stopping, so a working page still looks alive.

When it fails

<LottieError> appears in the error state, with a plain sentence as its default content. Pass children to replace it:

import {  Lottie,  LottieDisplay,  LottieError,  type LottieHandle,} from "lottie-react";import { useRef } from "react";export function ErrorOverlay() {  const handle = useRef<LottieHandle>(null);  return (    <Lottie src="/missing.json" lottieRef={handle}>      <LottieDisplay />      <LottieError>        <button type="button" onClick={() => handle.current?.reload()}>          Try again        </button>      </LottieError>    </Lottie>  );}

reload() is the way back: it throws the animation away, rebuilds it from src, and returns to loading. The same command picks up a URL whose contents have changed.

Reading the reason

The instance keeps error, the last failure, cleared when a load begins. Anything that mounts after the failure can still read it, which is how an overlay mounted late knows what went wrong.