fix(cmpts): defining component during render

FradSer · May 4, 2023 · 1edddf7 · 1edddf7
1 parent f49963d
commit 1edddf7
Showing 1 changed file with 44 additions and 44 deletions.
diff --git a/components/common/LayoutWrapper.tsx b/components/common/LayoutWrapper.tsx
@@ -7,6 +7,50 @@ import Header from '@/components/Header'
 
 import useLoading from '@/hooks/useLoading'
 
+function LoadingDots() {
+  const loadingDotsVariants = {
+    start: {
+      transition: {
+        staggerChildren: 0.4,
+      },
+    },
+    end: {
+      transition: {
+        staggerChildren: 0.4,
+      },
+    },
+  }
+
+  const loadingDotTransition = {
+    duration: 0.8,
+    yoyo: Infinity,
+    ease: 'easeInOut',
+  }
+
+  const loadingDotVariants = {
+    start: {
+      opacity: 0,
+    },
+    end: {
+      opacity: 1,
+    },
+  }
+
+  return (
+    <motion.span variants={loadingDotsVariants} initial="start" animate="end">
+      {Array.from({ length: 3 }, (_, i) => (
+        <motion.span
+          key={i}
+          variants={loadingDotVariants}
+          transition={loadingDotTransition}
+        >
+          .
+        </motion.span>
+      ))}
+    </motion.span>
+  )
+}
+
 interface ILayoutWrapperProps {
   children: ReactNode
 }
@@ -139,50 +183,6 @@ function LayoutWrapper({ children }: ILayoutWrapperProps) {
     }
   )
 
-  function LoadingDots() {
-    const loadingDotsVariants = {
-      start: {
-        transition: {
-          staggerChildren: 0.4,
-        },
-      },
-      end: {
-        transition: {
-          staggerChildren: 0.4,
-        },
-      },
-    }
-
-    const loadingDotTransition = {
-      duration: 0.8,
-      yoyo: Infinity,
-      ease: 'easeInOut',
-    }
-
-    const loadingDotVariants = {
-      start: {
-        opacity: 0,
-      },
-      end: {
-        opacity: 1,
-      },
-    }
-
-    return (
-      <motion.span variants={loadingDotsVariants} initial="start" animate="end">
-        {Array.from({ length: 3 }, (_, i) => (
-          <motion.span
-            key={i}
-            variants={loadingDotVariants}
-            transition={loadingDotTransition}
-          >
-            .
-          </motion.span>
-        ))}
-      </motion.span>
-    )
-  }
-
   return (
     <>
       <motion.div