how to check if the 3d model from spline api is loaded to the dom in nextjs

Question

I am trying to create a new website and I want to add a 3d model from spline, I added it but it takes some time to load so I decided to add a loader/Spinner but I did not know how to check if the 3d model is loaded or not.

this is my component

import React from "react";
import styles from "../styles/Home.module.css";
import Spline from "@splinetool/react-spline";
import NavBar from "./NavBar";

function WelcomeComp() {
  return (
    <div className={styles.Welcome}>
      <div className="sticky top-4">
        <NavBar />
      </div>
      <div className="flex flex-row h-screen">
        <div className="flex flex-col items-start justify-center">
          <p className={styles.WelcomeLine1}>Hi, My name is Abdallah Zaher</p>
          <p className={styles.WelcomeLine2}>Iam a Front-end developer </p>
        </div>
        <div className="w-1/2">
          <Spline scene="https://prod.spline.design/-----/scene.splinecode" />
        </div>
      </div>
    </div>
  );
}

export default WelcomeComp;

and here I want to make the if condition if the model is loaded show the component else show the spinner

import WelcomeComp from "../components/WelcomeComp";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <WelcomeComp />
      <div className={styles.loader}></div>
    </div>
  );
}

Answer 1

Spline component supports onLoad prop, so your Spline implementation should look something like this:

    <Spline 
      onLoad={()=>setLoading(false)} 
      scene="https://prod.spline.design/-----/scene.splinecode" 
    />

To keep it simple, I recommend having the Spline component and the Loader/Spinner component together in one scope, so Spline can easily change the loading state and also the loader can easily react to it. This is one of the possible ways how to implement it:

    import React,{ useState } from "react";
    import styles from "../styles/Home.module.css";
    import Spline from "@splinetool/react-spline";
    import NavBar from "./NavBar";

    function WelcomeComp() {
      const [loading, setLoading] = useState(true)
      return (
       <>
        {loading && <div className={styles.loader}></div> }  //if loading, show loader
        <div className={styles.Welcome}>
          <div className="sticky top-4">
            <NavBar />
          </div>
          <div className="flex flex-row h-screen">
            <div className="flex flex-col items-start justify-center">
              <p className={styles.WelcomeLine1}>Hi, My name is Abdallah Zaher</p>
              <p className={styles.WelcomeLine2}>Iam a Front-end developer </p>
            </div>
             <div className="w-1/2">
              <Spline 
               onLoad={()=>setLoading(false)} 
               scene="https://prod.spline.design/-----/scene.splinecode" 
              />
             </div>
          </div>
        </div>
       </>
      );
    }

    export default WelcomeComp;

And of course, delete the loader div from the Home component.