From 1b4d7f65ee08a56ca6cc57bfc6336ca3ccad3a21 Mon Sep 17 00:00:00 2001 From: trisusilo48 Date: Tue, 3 Dec 2024 14:42:36 +0700 Subject: update performance desktop --- src/components/ui/HeroBanner.jsx | 11 +--- src/components/ui/HeroBannerSecondary.jsx | 6 +-- src/core/components/elements/Navbar/Navbar.jsx | 6 ++- .../components/elements/Navbar/NavbarDesktop.jsx | 63 ++++++++++++---------- .../components/elements/Navbar/NavbarMobile.jsx | 43 ++++++++++----- src/core/components/layouts/BasicLayout.jsx | 4 +- src/lib/brand/components/BrandCard.jsx | 1 + src/lib/flashSale/components/FlashSale.jsx | 2 + src/lib/home/components/BannerSection.jsx | 1 + src/lib/home/components/CategoryDynamic.jsx | 2 + src/lib/home/components/CategoryDynamicMobile.jsx | 2 + src/lib/home/components/PromotionProgram.jsx | 12 +++-- src/lib/home/components/ServiceList.jsx | 4 ++ src/lib/product/components/ProductCard.jsx | 8 +++ 14 files changed, 100 insertions(+), 65 deletions(-) (limited to 'src') diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx index 2eea5915..3025fc1e 100644 --- a/src/components/ui/HeroBanner.jsx +++ b/src/components/ui/HeroBanner.jsx @@ -7,9 +7,7 @@ import { Swiper, SwiperSlide } from 'swiper/react'; import Image from 'next/image'; import { useEffect, useMemo, useState } from 'react'; -import { useQuery } from 'react-query'; -import { bannerApi } from '@/api/bannerApi'; import Link from '@/core/components/elements/Link/Link'; import DesktopView from '@/core/components/views/DesktopView'; import MobileView from '@/core/components/views/MobileView'; @@ -52,10 +50,6 @@ const HeroBanner = () => { pagination: { dynamicBullets: false, clickable: true }, }; - const customLoader = ({ src }) => { - return src; // Loader yang mengembalikan URL gambar asli - }; - const BannerComponent = useMemo(() => { if (!heroBanner) return null; @@ -63,14 +57,11 @@ const HeroBanner = () => { {banner.name} { const [heroBannerSecondary, setHeroBannerSecondary] = useState([]); @@ -45,7 +43,7 @@ const HeroBannerSecondary = () => { height={1024} alt={heroBannerSecondary[randomIndex]?.name} className='object-cover object-center h-full' - loading='lazy' + loading='eager' placeholder='blur' blurDataURL='/images/indoteknik-placeholder.png' sizes='(max-width: 768px) 100vw, 50vw' diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx index 57904498..59f743a2 100644 --- a/src/core/components/elements/Navbar/Navbar.jsx +++ b/src/core/components/elements/Navbar/Navbar.jsx @@ -3,10 +3,12 @@ import dynamic from 'next/dynamic' const NavbarDesktop = dynamic(() => import('./NavbarDesktop')) const NavbarMobile = dynamic(() => import('./NavbarMobile')) -const Navbar = () => { +const Navbar = ({isMobile} ) => { + + if(isMobile) return + return ( <> - ) diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index fa3df5bf..f4b0d5e1 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -12,12 +12,9 @@ import { MenuButton, MenuItem, MenuList, - useDisclosure + useDisclosure, } from '@chakra-ui/react'; -import { - ChevronDownIcon, - HeartIcon -} from '@heroicons/react/24/outline'; +import { ChevronDownIcon, HeartIcon } from '@heroicons/react/24/outline'; import dynamic from 'next/dynamic'; import { default as Image, default as NextImage } from 'next/image'; import { useRouter } from 'next/router'; @@ -81,21 +78,17 @@ const NavbarDesktop = () => { }; window.addEventListener('scroll', handleScroll); + return () => { window.removeEventListener('scroll', handleScroll); }; }, []); useEffect(() => { - const handleScroll = () => { - setIsTop(window.scrollY < 100); - }; - - window.addEventListener('scroll', handleScroll); - return () => { - window.removeEventListener('scroll', handleScroll); - }; - }, []); + if (auth) { + loadCart(auth.id); + } + }, [auth]); useEffect(() => { setPendingTransactions(data); @@ -115,20 +108,22 @@ const NavbarDesktop = () => { }, [product, router]); useEffect(() => { - const handleCartChange = () => { - const cart = async () => { - const listCart = await getCountCart(); - setCartCount(listCart); - }; - cart(); - }; - handleCartChange(); - - window.addEventListener('localStorageChange', handleCartChange); - - return () => { - window.removeEventListener('localStorageChange', handleCartChange); - }; + // const handleCartChange = () => { + // const cart = async () => { + // const listCart = await getCountCart(); + // setCartCount(listCart); + // }; + // cart(); + // }; + // handleCartChange(); + + setCartCount(cart?.products?.length) + + // window.addEventListener('localStorageChange', handleCartChange); + + // return () => { + // window.removeEventListener('localStorageChange', handleCartChange); + // }; }, [transactions.data, cart]); useEffect(() => { @@ -202,7 +197,9 @@ const NavbarDesktop = () => { src={IndoteknikLogo} alt='Indoteknik Logo' width={210} - height={210 / 3} + height={70} + loading='eager' + priority={true} />
@@ -236,6 +233,7 @@ const NavbarDesktop = () => { alt='Whatsapp' width={48} height={48} + loading='eager' />
Whatsapp
@@ -284,6 +282,7 @@ const NavbarDesktop = () => { quality={100} // className={`fixed ${isTop ? 'md:top-[145px] lg:top-[160px] ' : 'lg:top-[85px] top-[80px]'} rounded-3xl md:left-1/4 lg:left-1/4 xl:left-1/4 left-2/3 w-40 h-12 p-2 z-50 transition-all duration-300 animate-pulse`} className={`inline-block relative -top-8 transition-all duration-300 z-20 animate-pulse`} + loading='eager' />
)} @@ -394,6 +393,7 @@ const SocialMedias = () => ( // alt='Youtube - Indoteknik.com' width={24} height={24} + loading='eager' /> ( // alt='TikTok - Indoteknik.com' width={24} height={24} + loading='eager' /> {/* @@ -426,6 +427,7 @@ const SocialMedias = () => ( // alt='Facebook - Indoteknik.com' width={24} height={24} + loading='eager' /> ( // alt='Instagram - Indoteknik.com' width={24} height={24} + loading='eager' /> ( // alt='Linkedin - Indoteknik.com' width={24} height={24} + loading='eager' /> ( // alt='Maps - Indoteknik.com' width={24} height={24} + loading='eager' />
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx index 90314671..47182a47 100644 --- a/src/core/components/elements/Navbar/NavbarMobile.jsx +++ b/src/core/components/elements/Navbar/NavbarMobile.jsx @@ -12,30 +12,44 @@ import { useEffect, useState } from 'react'; import MobileView from '../../views/MobileView'; import Link from '../Link/Link'; import TopBanner from './TopBanner'; +import { useCartStore } from '~/modules/cart/stores/useCartStore'; +import useAuth from '@/core/hooks/useAuth'; const Search = dynamic(() => import('./Search')); const NavbarMobile = () => { const { Sidebar, open } = useSidebar(); + const auth = useAuth(); const [cartCount, setCartCount] = useState(0); + const { loadCart, cart, summary, updateCartItem } = useCartStore(); - useEffect(() => { - const handleCartChange = () => { - const cart = async () => { - const listCart = await getCountCart(); - setCartCount(listCart); - }; - cart(); - }; - handleCartChange(); + // useEffect(() => { + // const handleCartChange = () => { + // const cart = async () => { + // const listCart = await getCountCart(); + // setCartCount(listCart); + // }; + // cart(); + // }; + // handleCartChange(); + + // window.addEventListener('localStorageChange', handleCartChange); - window.addEventListener('localStorageChange', handleCartChange); + // return () => { + // window.removeEventListener('localStorageChange', handleCartChange); + // }; + // }, []); - return () => { - window.removeEventListener('localStorageChange', handleCartChange); - }; - }, []); + useEffect(() => { + if(auth){ + loadCart(auth?.id); + } + }, [auth]); + + useEffect(() => { + setCartCount(cart?.products?.length); + }, [cart]); return ( @@ -48,6 +62,7 @@ const NavbarMobile = () => { alt='Indoteknik Logo' width={120} height={40} + loading='eager' />
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index 1b62bf05..2998fa63 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -112,7 +112,7 @@ const BasicLayout = ({ children }) => { onAnimationEnd={() => setHighlight(false)} /> )} - + {children}
{ className='block sm:hidden' width={36} height={36} + loading='eager' /> { className='hidden sm:block' width={44} height={44} + loading='eager' />
diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx index ebd41a67..8bb4b904 100644 --- a/src/lib/brand/components/BrandCard.jsx +++ b/src/lib/brand/components/BrandCard.jsx @@ -20,6 +20,7 @@ const BrandCard = ({ brand }) => { height={500} quality={85} className='h-full w-[122px] object-contain object-center' + loading='eager' /> )} {!brand.logo && ( diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx index 6d90cad7..f4be279e 100644 --- a/src/lib/flashSale/components/FlashSale.jsx +++ b/src/lib/flashSale/components/FlashSale.jsx @@ -47,6 +47,7 @@ const FlashSale = () => { width={1080} height={192} className='w-full rounded mb-4 hidden sm:block' + loading='eager' /> { width={256} height={48} className='w-full rounded mb-4 block sm:hidden' + loading='eager' /> { src={banner.image} alt={banner.name} className='h-auto w-full rounded' + loading='eager' /> ))} diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index d72fe1f1..b6994f60 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -85,6 +85,7 @@ const CategoryDynamic = () => { width={90} height={30} className='object-fit p-4' + loading='eager' />

@@ -127,6 +128,7 @@ const CategoryDynamic = () => { height={40} placeholder='blur' blurDataURL='/icon.jpg' + loading='eager' />

diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx index 67ae6f5f..5d9e872c 100644 --- a/src/lib/home/components/CategoryDynamicMobile.jsx +++ b/src/lib/home/components/CategoryDynamicMobile.jsx @@ -90,6 +90,7 @@ const CategoryDynamicMobile = () => { width={30} height={30} className='' + loading='eager' />

@@ -123,6 +124,7 @@ const CategoryDynamicMobile = () => { width={40} height={40} className='p-2' + loading='eager' />

diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx index fc23bf78..d8bf3edb 100644 --- a/src/lib/home/components/PromotionProgram.jsx +++ b/src/lib/home/components/PromotionProgram.jsx @@ -69,7 +69,8 @@ const BannerSection = () => { quality={85} src={banner.image} alt={banner.name} - className='h-auto w-full rounded hover:scale-105 transition duration-500 ease-in-out' + className='rounded hover:scale-105 transition duration-500 ease-in-out' + loading='eager' /> ))} @@ -82,12 +83,13 @@ const BannerSection = () => { {banner.name} diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx index b3cc8fe5..6d03a587 100644 --- a/src/lib/home/components/ServiceList.jsx +++ b/src/lib/home/components/ServiceList.jsx @@ -18,6 +18,7 @@ const ServiceList = () => { src='/images/icon_service/ONE-STOP-SOLUTIONS.svg' alt='' className='h-20 w-20 rounded' + loading='eager' />

@@ -43,6 +44,7 @@ const ServiceList = () => { src='/images/icon_service/WARRANTY.svg' alt='' className='h-20 w-20 rounded' + loading='eager' />
@@ -68,6 +70,7 @@ const ServiceList = () => { src='/images/icon_service/DUE-PAYMENT.svg' alt='' className='h-20 w-20 rounded' + loading='eager' />
@@ -93,6 +96,7 @@ const ServiceList = () => { src='/images/icon_service/TAX.svg' alt='' className='h-20 w-20 rounded' + loading='eager' />
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 174e5cb1..4e80083b 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -90,6 +90,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { className='w-4 h-5 object-contain object-top sm:h-6' width={50} height={50} + loading='eager' /> )}
@@ -101,6 +102,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { className='w-11 h-6 object-contain object-top ml-1 mr-1 sm:h-6' width={50} height={50} + loading='eager' /> )}

@@ -115,6 +117,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { className='h-full' width={1000} height={100} + loading='eager' />

@@ -129,6 +132,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' width={13} height={5} + loading='eager' /> {product?.flashSale?.tag != 'false' || @@ -164,6 +168,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { alt='pickup now' width={90} height={12} + loading='eager' /> )} @@ -267,6 +272,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { className='w-4 h-5 object-contain object-top sm:h-6' width={50} height={50} + loading='eager' /> )}
@@ -278,6 +284,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { className='w-11 h-6 object-contain object-top ml-1 sm:h-6' width={50} height={50} + loading='eager' /> )}

@@ -297,6 +304,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' width={15} height={10} + loading='eager' /> {' '} -- cgit v1.2.3