I am in the process of developing a brand new website and I have integrated a 3D model from spline, although it is taking quite some time to load. To improve user experience, I decided to implement a loader/Spinner. However, I'm facing the challenge of determining how to check if the 3D model has finished loading or not.
Below is the code for 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;
My objective now is to create an "if" condition where the component will display once the model has loaded, otherwise 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>
);
}