From 1edddf76abe25b83283cf398e8dd3c041fb420cd Mon Sep 17 00:00:00 2001
From: Frad LEE <fradser@gmail.com>
Date: Thu, 4 May 2023 22:38:38 +0800
Subject: [PATCH] fix(cmpts): defining component during render

---
 components/common/LayoutWrapper.tsx | 88 ++++++++++++++---------------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/components/common/LayoutWrapper.tsx b/components/common/LayoutWrapper.tsx
index d3eb49a..dc63f2b 100644
--- 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