add model loading

pages/index.tsx

@@ -4,13 +4,15 @@ import Image from 'next/future/image';
 import Head from 'next/head';
 import { useEffect, useRef, useState } from 'react';
 import { InitFn, THREE, useThree } from 'rua-three';
-import style from 'styles/index/index.module.css';
+import styles from 'styles/index/index.module.css';
 import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import type { NextPageWithLayout } from 'types';
 
 const MainLayout = dynamic(() => import('layouts/MainLayout'));
+const Loading = dynamic(() => import('components/RUA/loading/RUALoading'));
 
-const gltfLoader = new GLTFLoader();
+const manager = new THREE.LoadingManager();
+const gltfLoader = new GLTFLoader(manager);
 
 const Home: NextPageWithLayout = () => {
   const wrapper = useRef<HTMLDivElement>(null);
@@ -19,6 +21,15 @@ const Home: NextPageWithLayout = () => {
     height: 300,
   });
 
+  const [loading, setLoading] = useState(true);
+  const [showLoading, setShowLoading] = useState(true);
+  manager.onLoad = () => {
+    setLoading(false);
+    setTimeout(() => {
+      setShowLoading(false);
+    }, 300);
+  };
+
   const setCanvasSize = () => {
     if (!wrapper.current) return;
     const width = wrapper.current.clientWidth;
@@ -87,7 +98,7 @@ const Home: NextPageWithLayout = () => {
         <div className="z-0 flex flex-col w-full h-full max-w-4xl px-4 py-32 text-2xl">
           {/* <h1 className="pb-4 text-4xl">Hi there 👋, I&apos;m Arthur. </h1> */}
           <h1 className="flex pb-4 text-5xl">
-            <span className={cn('font-Aleo font-semibold', style.gradient)}>
+            <span className={cn('font-Aleo font-semibold', styles.gradient)}>
               Hi there
             </span>
             <span className="ml-3">
@@ -100,8 +111,24 @@ const Home: NextPageWithLayout = () => {
             </span>
           </h1>
 
-          <div className="relative flex-1" ref={wrapper}>
+          <div
+            className="relative flex-1 overflow-hidden rounded-xl"
+            ref={wrapper}
+          >
             <canvas ref={ref} className="absolute top-0 left-0"></canvas>
+            {showLoading && (
+              <div
+                className={cn(
+                  'absolute top-0 left-0 z-10 ',
+                  'items-center flex justify-center',
+                  'w-full h-full transition-all duration-500',
+                  'bg-white',
+                  loading ? 'opacity-1' : 'opacity-0'
+                )}
+              >
+                <Loading />
+              </div>
+            )}
           </div>
           {/* <p>I&apos;m a Front-end developer. Yes, that&apos;s mean</p>
             <p

styles/index/index.module.css

@@ -1,25 +1,25 @@
 .gradient {
-    background: rgb(238, 174, 200);
-    background: linear-gradient(
-            45deg,
-            rgba(238, 174, 200, 1) 0%,
-            rgba(148, 187, 233, 1) 100%
-    );
-    background-size: 400%;
-    animation: gradient 5s ease infinite;
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+  background: rgb(238, 174, 200);
+  background: linear-gradient(
+    45deg,
+    rgba(238, 174, 200, 1) 0%,
+    rgba(148, 187, 233, 1) 100%
+  );
+  background-size: 400%;
+  animation: gradient 5s ease infinite;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 @keyframes gradient {
-    0% {
-        background-position: 0% 50%;
-    }
-    50% {
-        background-position: 100% 50%;
-    }
-    100% {
-        background-position: 0% 50%;
-    }
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
 }