10 files changed, 42 insertions, 17 deletions

diff --git a/public/images/indoteknik-logo.png b/public/images/indoteknik-logo.png
new file mode 100644
index 00000000..87c696aa
--- /dev/null
+++ b/public/images/indoteknik-logo.png
diff --git a/public/images/indoteknik-placeholder.png b/public/images/indoteknik-placeholder.png
new file mode 100644
index 00000000..a83b012d
--- /dev/null
+++ b/public/images/indoteknik-placeholder.png
diff --git a/src/core/components/elements/Image/Image.jsx b/src/core/components/elements/Image/Image.jsx
index be2866e7..579660a4 100644
--- a/src/core/components/elements/Image/Image.jsx
+++ b/src/core/components/elements/Image/Image.jsx
@@ -4,9 +4,10 @@ import "react-lazy-load-image-component/src/effects/opacity.css"
 const Image = ({ ...props }) => (
   <LazyLoadImage
     { ...props }
-    effect="opacity"
     src={props.src || '/images/noimage.jpeg'}
+    placeholderSrc="/images/indoteknik-placeholder.png"
     alt={props.src ? props.alt : 'Image Not Found - Indoteknik'}
+    wrapperClassName="bg-white"
   />
 )
 
diff --git a/src/lib/product/components/Product.jsx b/src/lib/product/components/Product.jsx
index 2a3624e7..299cdc77 100644
--- a/src/lib/product/components/Product.jsx
+++ b/src/lib/product/components/Product.jsx
@@ -87,7 +87,7 @@ const Product = ({ product }) => {
       <Image
         src={product.image}
         alt={product.name}
-        className="h-72 object-contain object-center w-full border-b border-gray_r-4 bg-white"
+        className="h-72 object-contain object-center w-full border-b border-gray_r-4"
       />
 
       <div className="p-4">
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 86ac3a64..9eb00ae0 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -14,7 +14,7 @@ const ProductCard = ({ product, simpleTitle }) => {
           <Image 
             src={product?.image}
             alt={product?.name}
-            className="w-full object-contain object-center h-36 bg-white"
+            className="w-full object-contain object-center h-36"
           />
           { product.variantTotal > 1 && (
             <div className="absolute badge-gray bottom-1.5 left-1.5">{ product.variantTotal } Varian</div>
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()