diff options
Diffstat (limited to 'src/core/components/elements')
4 files changed, 43 insertions, 16 deletions
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 } |