Code to render a Lottie animation using React (with Lazy Loading)

App.jsx

import animationData from "./loading.json";
import placeholderImg from "./preview.png";
import { Player } from "@lottiefiles/react-lottie-player";

const App = () => {
  return (
    <div className="App">
      {!animationData ? (
        <img src={placeholderImg} alt="Loading placeholder" />
      ) : (
        <Player
          autoplay
          loop
          src={animationData}
          style={{ height: "50%", width: "50%" }}
        />
      )}
    </div>
  );
};

export default App;