fix: dont render 3js on mobile (#99)

liftedinit · Dec 2, 2024 · 619c40a · 619c40a
1 parent c20e86c
commit 619c40a
Showing 1 changed file with 42 additions and 18 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,26 +1,37 @@
 import Head from 'next/head';
 import { Link as ScrollLink, Element, animateScroll as scroll } from 'react-scroll';
 import dynamic from 'next/dynamic';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Image from 'next/image';
 import { BankIcon, GroupsIcon, AdminsIcon, FactoryIcon } from '@/components/icons';
 import { useInView } from 'react-intersection-observer';
 import Link from 'next/link';
+import { useIsMobile } from '@/hooks';
 
-const PenroseTriangleScene = dynamic(() => import('@/components/3js/pennRoseTriangleScene'), {
-  ssr: false,
-  loading: () => null,
-});
+const PenroseTriangleScene = dynamic(
+  () =>
+    useIsMobile() ? Promise.resolve(() => null) : import('@/components/3js/pennRoseTriangleScene'),
+  {
+    ssr: false,
+    loading: () => null,
+  }
+);
 
-const AnimatedAsterisk = dynamic(() => import('@/components/3js/animatedAsterisk'), {
-  ssr: false,
-  loading: () => null,
-});
+const AnimatedAsterisk = dynamic(
+  () => (useIsMobile() ? Promise.resolve(() => null) : import('@/components/3js/animatedAsterisk')),
+  {
+    ssr: false,
+    loading: () => null,
+  }
+);
 
-const AnimatedShape = dynamic(() => import('@/components/3js/animatedMesh'), {
-  ssr: false,
-  loading: () => null,
-});
+const AnimatedShape = dynamic(
+  () => (useIsMobile() ? Promise.resolve(() => null) : import('@/components/3js/animatedMesh')),
+  {
+    ssr: false,
+    loading: () => null,
+  }
+);
 
 const FadeInSection = ({
   children,
@@ -46,11 +57,20 @@ const FadeInSection = ({
 
 export default function Home() {
   const [is3DReady, setIs3DReady] = useState(false);
+  const isMobile = useIsMobile();
 
   const handle3DLoad = () => {
-    setIs3DReady(true);
+    if (!isMobile) {
+      setIs3DReady(true);
+    }
   };
 
+  useEffect(() => {
+    if (isMobile) {
+      setIs3DReady(true);
+    }
+  }, [isMobile]);
+
   return (
     <>
       <Head>
@@ -115,7 +135,11 @@ export default function Home() {
             </div> */}
             <div className="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
               <div className="h-56 w-full sm:h-72 md:h-80 lg:h-full lg:w-full ">
-                <AnimatedShape shape="icosahedron" onLoad={handle3DLoad} />
+                {isMobile ? (
+                  <div></div>
+                ) : (
+                  <AnimatedShape shape="icosahedron" onLoad={handle3DLoad} />
+                )}
               </div>
             </div>
           </section>
@@ -138,7 +162,7 @@ export default function Home() {
                     {/* First Box */}
                     <div className="group relative text-center p-4 rounded-2xl shadow-lg overflow-hidden transition-all duration-300 ease-in-out hover:bg-gradient-to-br hover:from-white/80 hover:to-transparent dark:hover:from-base-300/80 dark:hover:to-transparent backdrop-blur-sm bg-white/60 dark:bg-base-300/60 hover:scale-105">
                       <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0">
-                        <AnimatedAsterisk onLoad={handle3DLoad} />
+                        {isMobile ? <div></div> : <AnimatedAsterisk onLoad={handle3DLoad} />}
                       </div>
                       <div className="w-full h-full p-4 rounded-2xl backdrop-blur-sm pointer-events-none ">
                         <div className="relative z-10 pointer-events-none">
@@ -162,7 +186,7 @@ export default function Home() {
                     {/* Second Box */}
                     <div className="group relative text-center p-4 rounded-2xl shadow-lg overflow-hidden transition-all duration-300 ease-in-out hover:bg-gradient-to-br hover:from-white/80 hover:to-transparent dark:hover:from-base-300/80 dark:hover:to-transparent backdrop-blur-sm bg-white/60 dark:bg-base-300/60 hover:scale-105">
                       <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0">
-                        <AnimatedAsterisk onLoad={handle3DLoad} />
+                        {isMobile ? <div></div> : <AnimatedAsterisk onLoad={handle3DLoad} />}
                       </div>
                       <div className="w-full h-full p-4 rounded-2xl backdrop-blur-sm pointer-events-none ">
                         <div className="relative z-10 pointer-events-none">
@@ -186,7 +210,7 @@ export default function Home() {
                     {/* Third Box */}
                     <div className="group relative text-center p-4 rounded-2xl shadow-lg overflow-hidden transition-all duration-300 ease-in-out hover:bg-gradient-to-br hover:from-white/80 hover:to-transparent dark:hover:from-base-300/80 dark:hover:to-transparent backdrop-blur-sm bg-white/60 dark:bg-base-300/60 hover:scale-105">
                       <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0">
-                        <AnimatedAsterisk onLoad={handle3DLoad} />
+                        {isMobile ? <div></div> : <AnimatedAsterisk onLoad={handle3DLoad} />}
                       </div>
                       <div className="w-full h-full p-4 rounded-2xl backdrop-blur-sm pointer-events-none ">
                         <div className="relative z-10 pointer-events-none">