diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-08-08 10:39:34 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-08-08 10:39:34 +0700 |
| commit | 16fed2e7d00252f5df3f9b5bdf0a5a2b2a094f76 (patch) | |
| tree | 53d9f4d8991ba699b30eacfac1b2498ae1b0bf48 /src/lib/home | |
| parent | f862f6426c28fb9245d13fb7386a88b209639d64 (diff) | |
Improve home page performance
Diffstat (limited to 'src/lib/home')
| -rw-r--r-- | src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx | 22 |
1 files changed, 13 insertions, 9 deletions
diff --git a/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx b/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx index 00589342..bd783053 100644 --- a/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx +++ b/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx @@ -1,12 +1,16 @@ -import BrandSkeleton from '@/core/components/elements/Skeleton/BrandSkeleton' +import useDevice from '@/core/hooks/useDevice' +import Skeleton from 'react-loading-skeleton' -const PreferredBrandSkeleton = () => ( - <div className='grid grid-cols-4 gap-x-3'> - <BrandSkeleton /> - <BrandSkeleton /> - <BrandSkeleton /> - <BrandSkeleton /> - </div> -) +const PreferredBrandSkeleton = () => { + const { isDesktop } = useDevice() + + return ( + <div className='grid grid-cols-4 md:grid-cols-8 gap-x-3'> + {Array.from({ length: isDesktop ? 8 : 4 }, (_, index) => ( + <Skeleton count={1} height={isDesktop ? 84 : 56} key={index} /> + ))} + </div> + ) +} export default PreferredBrandSkeleton |