feat: add loading effect

src/app/page.css

@@ -2,3 +2,22 @@
 	width: 100vw !important;
 	height: 100vh !important;
 }
+
+.loader {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: black;
+	z-index: 4444;
+	transition: opacity 1.0s ease-in-out;
+	pointer-events: none;
+
+	opacity: 1;
+	display: block;
+}
+
+.loader.hidden {
+	opacity: 0;
+}

src/app/page.tsx

@@ -3,7 +3,8 @@
 import {
 	Environment,
 	OrbitControls,
-	PerspectiveCamera
+	PerspectiveCamera,
+	useProgress
 } from '@react-three/drei';
 import { Canvas, useLoader, useFrame } from '@react-three/fiber';
 import {
@@ -24,7 +25,8 @@ import {
 	DoubleSide,
 	TextureLoader,
 	Color,
-	MeshStandardMaterial
+	MeshStandardMaterial,
+	FogExp2
 } from 'three';
 
 import './page.css';
@@ -613,10 +615,30 @@ const SealCube = forwardRef<Mesh>((props, ref) => {
 });
 SealCube.displayName = 'SealCube';
 
+function Loader() {
+	const { progress, active } = useProgress();
+	const [visible, setVisible] = useState(true);
+
+	useLayoutEffect(() => {
+		if (!active && progress === 100) {
+			const timeout = setTimeout(() => setVisible(false), 500);
+			return () => clearTimeout(timeout);
+		}
+	}, [progress, active]);
+
+	return (
+		<div
+			className={`loader ${!visible ? 'loader hidden' : ''}`}
+		/>
+	);
+}
+
 export default function Home() {
 	const [sealMesh, setSealMesh] = useState<Mesh | null>(null);
 
 	return (
+		<>
+			<Loader />
 			<Canvas
 				shadows
 				camera={{ position: [0, 5, 15], fov: 50, far: 100 }}
@@ -636,6 +658,8 @@ export default function Home() {
 				</EffectComposer>
 
 				<Environment files={'hdr/sky.hdr'} environmentIntensity={1} background />
+				<fogExp2 attach='fog' args={[0x9A9A9A, 0.01]} />
+
 
 				<Terrain
 					chunks={16}
@@ -665,5 +689,6 @@ export default function Home() {
 					maxDistance={10}
 				/>
 			</Canvas>
+		</>
 	);
 }