change home model to lazy load

app/page.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import styles from 'styles/index/index.module.css';
 import dynamic from 'next/dynamic';
 
-const HomeModel = dynamic(() => import('./home-modle'));
+const HomeModel = dynamic(() => import('../components/models/home-model'));
 
 export const metadata = {
   title: 'RUA - Home',
@@ -12,7 +12,7 @@ export const metadata = {
 export default function Page() {
   return (
     <main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl">
-      <div className="max-w-4xl flex flex-col w-full h-full  px-4 py-32 text-2xl">
+      <div className="flex flex-col w-full h-full max-w-4xl px-4 py-24 text-2xl">
         <h1 className="flex pb-4 text-5xl">
           <span className={clsx('font-semibold font-Lobster', styles.gradient)}>
             Hi there
@@ -27,7 +27,7 @@ export default function Page() {
           </span>
         </h1>
 
-        <div className="w-full h-full relative">
+        <div className="relative w-full h-full">
           <HomeModel />
         </div>
       </div>

components/models/cat-model.tsx

@@ -1,18 +1,13 @@
-'use client';
-
-import { Stats } from '@react-three/drei';
-import { Canvas, useFrame, useLoader, useThree } from '@react-three/fiber';
+import { useThree, useLoader, useFrame } from '@react-three/fiber';
 import { getMousePosition } from 'lib/utils';
-import { useEffect, useRef } from 'react';
-import useStore from 'store';
+import { useRef, useEffect } from 'react';
 import * as THREE from 'three';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import useStore from 'store';
+import { rotationX, rotationY } from './home-model';
 
-const rotationY = 0.4;
-const rotationX = 0.18;
-
-const Model = () => {
+const CatModel = () => {
   const mixer = useRef<THREE.AnimationMixer | null>(null);
   const toggleLoading = useStore((state) => state.toggleLoading);
 
@@ -34,7 +29,7 @@ const Model = () => {
     });
     camera.position.x = -5.66648088408735e-8;
     camera.position.y = 0.3;
-    camera.position.z = 1.3;
+    camera.position.z = 1.5;
     toggleLoading(false);
 
     const halfWidth = Math.floor(window.innerWidth / 2);
@@ -84,30 +79,4 @@ const Model = () => {
   );
 };
 
-const HomeModel = () => {
-  const modelLoading = useStore((state) => state.modelLoading);
-
-  return (
-    <>
-      <Canvas camera={{ fov: 55 }}>
-        <ambientLight color={0xffffff} intensity={0.5} />
-        <Model />
-        <Stats />
-      </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> */}
-    </>
-  );
-};
-
-export default HomeModel;
+export default CatModel;

components/models/home-model.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { Stats } from '@react-three/drei';
+import { Canvas } from '@react-three/fiber';
+import clsx from 'clsx';
+import Loading from 'components/rua/loading/rua-loading';
+import { Suspense, lazy } from 'react';
+import useStore from 'store';
+
+const CatModel = lazy(() => import('components/models/cat-model'));
+
+export const rotationY = 0.4;
+export const rotationX = 0.18;
+
+const HomeModel = () => {
+  const modelLoading = useStore((state) => state.modelLoading);
+
+  return (
+    <>
+      <Canvas camera={{ fov: 55 }}>
+        <ambientLight color={0xffffff} intensity={0.5} />
+        <Suspense fallback={<></>}>
+          <CatModel />
+        </Suspense>
+        <Stats />
+      </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>
+    </>
+  );
+};
+
+export default HomeModel;

components/rua/loading/rua-loading.tsx

@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
 import clsx from 'clsx';
+import { useTheme } from 'next-themes';
+import Image from 'next/image';
 import loadingImage from 'public/images/img/mona-loading-default.gif';
 import loadingImageDimmed from 'public/images/img/mona-loading-dimmed.gif';
-import Image from 'next/image';
-import { useTheme } from 'next-themes';
+import { memo } from 'react';
 
 type Props = {
   className?: string;