1 files changed, 21 insertions, 5 deletions
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 05c6520a..6503ac20 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,9 +1,25 @@
+import dynamic from "next/dynamic"
 import Seo from "@/core/components/Seo"
-import BasicLayout from "@/core/components/layouts/BasicLayout"
-import CategoryHomeId from "@/lib/home/components/CategoryHomeId"
-import HeroBanner from "@/lib/home/components/HeroBanner"
-import PopularProduct from "@/lib/home/components/PopularProduct"
-import PreferredBrand from "@/lib/home/components/PreferredBrand"
+import ImageSkeleton from "@/core/components/elements/Skeleton/ImageSkeleton"
+import PopularProductSkeleton from "@/lib/home/components/Skeleton/PopularProductSkeleton"
+
+const BasicLayout = dynamic(() => import("@/core/components/layouts/BasicLayout"))
+
+const HeroBanner = dynamic(() => import("@/lib/home/components/HeroBanner"), {
+  loading: <ImageSkeleton />
+})
+
+const PreferredBrand = dynamic(() => import("@/lib/home/components/PreferredBrand"), {
+  loading: <PopularProductSkeleton />
+})
+
+const PopularProduct = dynamic(() => import("@/lib/home/components/PopularProduct"), {
+  loading: <PopularProductSkeleton />
+})
+
+const CategoryHomeId = dynamic(() => import("@/lib/home/components/CategoryHomeId"), {
+  loading: <PopularProductSkeleton />
+})
 
 export default function Home() {
   return (