From 16fed2e7d00252f5df3f9b5bdf0a5a2b2a094f76 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 8 Aug 2023 10:39:34 +0700
Subject: Improve home page performance

---
 .../components/elements/Navbar/NavbarDesktop.jsx   |  5 +++-
 src/core/components/elements/Navbar/Search.jsx     | 30 +++++++++++-----------
 src/core/components/elements/Navbar/TopBanner.jsx  |  5 ++++
 .../elements/Skeleton/TopBannerSkeleton.jsx        | 19 ++++++++++++++
 4 files changed, 43 insertions(+), 16 deletions(-)
 create mode 100644 src/core/components/elements/Skeleton/TopBannerSkeleton.jsx

(limited to 'src/core/components/elements')

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 1f5204cd..acd2d1ee 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -14,14 +14,17 @@ import { useEffect, useState } from 'react'
 import useAuth from '@/core/hooks/useAuth'
 import NavbarUserDropdown from './NavbarUserDropdown'
 import { getCountCart } from '@/core/utils/cart'
-import TopBanner from './TopBanner'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import { useRouter } from 'next/router'
 import { getAuth } from '@/core/utils/auth'
 import { createSlug, getIdFromSlug } from '@/core/utils/slug'
 import productApi from '@/lib/product/api/productApi'
+import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton'
 
 const Search = dynamic(() => import('./Search'))
+const TopBanner = dynamic(() => import('./TopBanner'), {
+  loading: () => <TopBannerSkeleton />
+})
 
 const NavbarDesktop = () => {
   const [isOpenCategory, setIsOpenCategory] = useState(false)
diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx
index 47a9c235..f4a8ab3a 100644
--- a/src/core/components/elements/Navbar/Search.jsx
+++ b/src/core/components/elements/Navbar/Search.jsx
@@ -64,21 +64,21 @@ const Search = () => {
           <MagnifyingGlassIcon className='w-6' />
         </button>
 
-        {suggestions.length > 0 && (
-          <>
-            <div className='absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6 z-50'>
-              {suggestions.map((suggestion, index) => (
-                <Link
-                  href={`/shop/search?q=${suggestion.term}`}
-                  key={index}
-                  className='px-3 py-3 !text-gray_r-12 font-normal'
-                >
-                  {suggestion.term}
-                </Link>
-              ))}
-            </div>
-          </>
-        )}
+        <div
+          className={`absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6 z-50 ${
+            suggestions.length > 0 ? 'block' : 'hidden'
+          }`}
+        >
+          {suggestions.map((suggestion, index) => (
+            <Link
+              href={`/shop/search?q=${suggestion.term}`}
+              key={index}
+              className='px-3 py-3 !text-gray_r-12 font-normal'
+            >
+              {suggestion.term}
+            </Link>
+          ))}
+        </div>
       </form>
     </>
   )
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index 9efd0a8d..dca2e930 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -2,11 +2,16 @@ import odooApi from '@/core/api/odooApi'
 import { useQuery } from 'react-query'
 import Image from 'next/image'
 import Link from '../Link/Link'
+import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton'
 
 const TopBanner = () => {
   const fetchTopBanner = async () => await odooApi('GET', '/api/v1/banner?type=top-banner')
   const topBanner = useQuery('topBanner', fetchTopBanner)
 
+  if (topBanner.isLoading) {
+    return <TopBannerSkeleton />
+  }
+
   return (
     topBanner.isFetched &&
     topBanner.data?.length > 0 && (
diff --git a/src/core/components/elements/Skeleton/TopBannerSkeleton.jsx b/src/core/components/elements/Skeleton/TopBannerSkeleton.jsx
new file mode 100644
index 00000000..f7d2e748
--- /dev/null
+++ b/src/core/components/elements/Skeleton/TopBannerSkeleton.jsx
@@ -0,0 +1,19 @@
+import useDevice from '@/core/hooks/useDevice'
+import classNames from 'classnames'
+import Skeleton from 'react-loading-skeleton'
+
+const TopBannerSkeleton = () => {
+  const { isDesktop, isMobile } = useDevice()
+
+  const deviceClassName = {
+    'h-10': isDesktop,
+    'h-2.5': isMobile
+  }
+  const combinedClassName = classNames(deviceClassName)
+
+  return (
+    <Skeleton className={combinedClassName} count={1} containerClassName='w-full h-full block' />
+  )
+}
+
+export { TopBannerSkeleton }
-- 
cgit v1.2.3