optimization

5 files changed, 38 insertions, 14 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 (
diff --git a/src/pages/shop/brands/[slug].jsx b/src/pages/shop/brands/[slug].jsx
index 4965d4f7..da3ee84d 100644
--- a/src/pages/shop/brands/[slug].jsx
+++ b/src/pages/shop/brands/[slug].jsx
@@ -1,9 +1,11 @@
-import BasicLayout from "@/core/components/layouts/BasicLayout"
+import dynamic from "next/dynamic"
 import { getIdFromSlug, getNameFromSlug } from "@/core/utils/slug"
-import ProductSearch from "@/lib/product/components/ProductSearch"
 import { useRouter } from "next/router"
 import _ from "lodash"
-import Brand from "@/lib/brand/components/Brand"
+
+const BasicLayout = dynamic(() => import("@/core/components/layouts/BasicLayout"))
+const ProductSearch = dynamic(() => import("@/lib/product/components/ProductSearch"))
+const Brand = dynamic(() => import("@/lib/brand/components/Brand"))
 
 export default function BrandDetail() {
   const router = useRouter()
diff --git a/src/pages/shop/cart.jsx b/src/pages/shop/cart.jsx
index 20279e0c..735ea19f 100644
--- a/src/pages/shop/cart.jsx
+++ b/src/pages/shop/cart.jsx
@@ -1,5 +1,7 @@
-import AppLayout from "@/core/components/layouts/AppLayout"
-import CartComponent from "@/lib/cart/components/Cart"
+import dynamic from "next/dynamic"
+
+const AppLayout = dynamic(() => import("@/core/components/layouts/AppLayout"))
+const CartComponent = dynamic(() => import("@/lib/cart/components/Cart"))
 
 export default function Cart() {
   return (
diff --git a/src/pages/shop/product/[slug].jsx b/src/pages/shop/product/[slug].jsx
index 84a3c7d4..2f610afb 100644
--- a/src/pages/shop/product/[slug].jsx
+++ b/src/pages/shop/product/[slug].jsx
@@ -1,8 +1,10 @@
 import Seo from "@/core/components/Seo"
-import BasicLayout from "@/core/components/layouts/BasicLayout"
 import { getIdFromSlug } from "@/core/utils/slug"
 import productApi from "@/lib/product/api/productApi"
-import Product from "@/lib/product/components/Product"
+import dynamic from "next/dynamic"
+
+const BasicLayout = dynamic(() => import("@/core/components/layouts/BasicLayout"))
+const Product = dynamic(() => import("@/lib/product/components/Product"))
 
 export async function getServerSideProps(context) {
   const { slug } = context.query
diff --git a/src/pages/shop/search.jsx b/src/pages/shop/search.jsx
index e86b1f4e..a41c3b5f 100644
--- a/src/pages/shop/search.jsx
+++ b/src/pages/shop/search.jsx
@@ -1,8 +1,10 @@
-import BasicLayout from "@/core/components/layouts/BasicLayout"
-import ProductSearch from "@/lib/product/components/ProductSearch"
+import dynamic from "next/dynamic"
 import { useRouter } from "next/router"
 import _ from "lodash-contrib"
 
+const BasicLayout = dynamic(() => import("@/core/components/layouts/BasicLayout"))
+const ProductSearch = dynamic(() => import("@/lib/product/components/ProductSearch"))
+
 export default function Search() {
   const router = useRouter()