animation fix

Author: dukeofhazardz

src/App.jsx

@@ -1,3 +1,4 @@
+import { useState, useCallback } from "react";
 import Nav from "./components/Nav";
 import Jumbotron from "./components/Jumbotron";
 import Description from "./components/Description";
@@ -11,10 +12,15 @@ import WebgiViewer from "./components/WebgiViewer";
 import Loader from "./components/Loader";
 
 function App() {
+  const [loading, setLoading] = useState(true);
+
+  const handleViewerReady = useCallback(() => {
+    setLoading(false);
+  }, []);
 
   return (
     <div className="App">
-      <Loader />
+      {loading && <Loader />}
       <Nav />
       <Jumbotron />
       <FirstPlant />
@@ -24,7 +30,7 @@ function App() {
       <ThirdPlant />
       <About />
       <Footer />
-      <WebgiViewer />
+      <WebgiViewer onViewerReady={handleViewerReady} />
     </div>
   );
 }

src/components/Loader.jsx

@@ -1,8 +1,16 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import AnimatedLogo from '../assets/images/animated-logo.gif';
 
 
 const Loader = () => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      document.querySelector('.loader').style.display = 'none';
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
     <div className='loader'>
       <img className='logo' src={AnimatedLogo} alt="butterfly logo" />

src/components/WebgiViewer.jsx

@@ -21,7 +21,7 @@ import { scrollAnimation } from "../lib/scroll-animation";
 
 gsap.registerPlugin(ScrollTrigger);
 
-const WebgiViewer = () => {
+const WebgiViewer = ({ onViewerReady }) => {
   const canvasRef = useRef(null);
   const isMobile = window.innerWidth < 768;
   const isTablet =
@@ -95,7 +95,8 @@ const WebgiViewer = () => {
       }
     });
     memoizedScrollAnimation(position, target, onUpdate, viewer, isTablet);
-  }, []);
+    onViewerReady();
+  }, [onViewerReady]);
 
   useEffect(() => {
     setupViewer();