add model loading

app/home-modle.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import { useProgress } from '@react-three/drei';
 import { Canvas, useFrame, useLoader, useThree } from '@react-three/fiber';
-import { frameArea } from 'lib/utils';
 import { useEffect, useRef } from 'react';
 import useMainStore from 'store';
 import * as THREE from 'three';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import Loading from 'components/rua/loading/rua-loading';
+import clsx from 'clsx';
 
 const Model = () => {
   const mixer = useRef<THREE.AnimationMixer | null>(null);
@@ -31,18 +31,9 @@ const Model = () => {
     gltf.animations.forEach((clip) => {
       mixer.current?.clipAction(clip).play();
     });
-
-    const box = new THREE.Box3().setFromObject(gltf.scene);
-    const boxSize = box.getSize(new THREE.Vector3()).length();
-    const boxCenter = box.getCenter(new THREE.Vector3());
-    frameArea(
-      boxSize * 0.8,
-      boxSize,
-      boxCenter,
-      camera as THREE.PerspectiveCamera
-    );
-    camera.position.z += 0.15;
-    camera.position.y -= 0.15;
+    camera.position.x = -5.966648088408735e-8;
+    camera.position.y = 0.2734955480754394;
+    camera.position.z = 1.2001055939769085;
     toggleLoading(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -64,10 +55,22 @@ const HomeModel = () => {
   return (
     <>
       <Canvas>
-        <spotLight color={0xffffff} intensity={1.5} distance={100} angle={15} />
+        <spotLight color={0xffffff} intensity={1} distance={100} angle={15} />
         <ambientLight color={0xffffff} intensity={0.5} />
         <Model />
       </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>
     </>
   );
 };