add about page model loading

components/models/about-model.tsx

@@ -3,10 +3,14 @@
 import { Canvas } from '@react-three/fiber';
 import clsx from 'clsx';
 import { Suspense, lazy } from 'react';
+import useStore from 'store';
+import Loading from 'components/rua/loading/rua-loading';
 
 const CloudModel = lazy(() => import('components/models/cloud-model'));
 
 const AboutModel = () => {
+  const modelLoading = useStore((state) => state.modelLoading);
+
   return (
     <>
       <div className={clsx('fixed top-0 left-0 -z-10', 'w-full h-full')}>
@@ -16,6 +20,19 @@ const AboutModel = () => {
             <CloudModel />
           </Suspense>
         </Canvas>
+
+        <div
+          className={clsx(
+            'h-full w-full absolute',
+            'top-0 left-0 flex',
+            'justify-center items-center',
+            'bg-bluish-gray dark:bg-rua-gray-900',
+            'transition-all duration-300',
+            !modelLoading && 'opacity-0',
+          )}
+        >
+          <Loading />
+        </div>
         {/* <Leva /> */}
       </div>
     </>

components/models/cat-model.tsx

@@ -16,6 +16,7 @@ const CatModel = () => {
     GLTFLoader,
     './models/just_a_hungry_cat/modelDraco.gltf',
     (loader) => {
+      toggleLoading(true);
       const dracoLoader = new DRACOLoader();
       dracoLoader.setDecoderPath('./libs/draco/');
       loader.setDRACOLoader(dracoLoader);

components/models/cloud-model.tsx

@@ -7,10 +7,11 @@ import * as THREE from 'three';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { rotationX, rotationY } from './home-model';
+import useStore from 'store';
 
 const CloudModel = () => {
   const mixer = useRef<THREE.AnimationMixer | null>(null);
-
+  const toggleLoading = useStore((state) => state.toggleLoading);
   const camera = useThree((state) => state.camera);
 
   // After model loading, set theme to dark mode.
@@ -49,6 +50,7 @@ const CloudModel = () => {
     GLTFLoader,
     './models/cloud_station/modelDraco.gltf',
     (loader) => {
+      toggleLoading(true);
       const dracoLoader = new DRACOLoader();
       dracoLoader.setDecoderPath('./libs/draco/');
       loader.setDRACOLoader(dracoLoader);
@@ -61,6 +63,7 @@ const CloudModel = () => {
     });
     gltf.scene.position.set(0, 0, 0);
     camera.lookAt(0, 1, 0);
+    toggleLoading(false);
 
     const halfWidth = Math.floor(window.innerWidth / 2);
     const halfHeight = Math.floor(window.innerHeight / 2);