crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-12 12:47:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: optimize image loading on homepage

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2024-06-11 20:28:07 +07:00
parent 682f2ecc63
commit 0471e07633
No known key found for this signature in database
GPG Key ID: CFD53CE570D42DF5
5 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/home-page/why-choose.tsx
View File

@ -29,6 +29,7 @@ const WhyChoose = async () => {
fileId={reason.file as string} fileId={reason.file as string}
title={(reason.title || reason.name) as string} title={(reason.title || reason.name) as string}
className="h-[60px] w-[60px]" className="h-[60px] w-[60px]"
sizes="60px"
/> />
</Suspense> </Suspense>
<div className="mx-3 h-[100px] min-w-0.5 bg-gray-200" /> <div className="mx-3 h-[100px] min-w-0.5 bg-gray-200" />

4
components/manufacturers-grid/index.tsx
View File

@ -21,7 +21,7 @@ const ManufacturersGrid = ({ manufacturers, variant = 'home' }: ManufacturersGri
</p> </p>
<div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5"> <div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5">
{popularManufacturers.map((manufacturer) => ( {popularManufacturers.map((manufacturer) => (
<div key={manufacturer.id} className="flex flex-col gap-3"> <div key={manufacturer.id} className="flex flex-col gap-2">
<ManufacturerItem manufacturer={manufacturer} /> <ManufacturerItem manufacturer={manufacturer} />
{variant === 'home' && <ButtonGroup manufacturer={manufacturer} />} {variant === 'home' && <ButtonGroup manufacturer={manufacturer} />}
</div> </div>
@ -36,7 +36,7 @@ const ManufacturersGrid = ({ manufacturers, variant = 'home' }: ManufacturersGri
{manufacturers {manufacturers
.toSorted((a, b) => a.display_name!.localeCompare(b.display_name!)) .toSorted((a, b) => a.display_name!.localeCompare(b.display_name!))
.map((manufacturer) => ( .map((manufacturer) => (
<div key={manufacturer.id} className="flex flex-col gap-3"> <div key={manufacturer.id} className="flex flex-col gap-2">
<ManufacturerItem manufacturer={manufacturer} /> <ManufacturerItem manufacturer={manufacturer} />
{variant === 'home' && <ButtonGroup manufacturer={manufacturer} />} {variant === 'home' && <ButtonGroup manufacturer={manufacturer} />}
</div> </div>

3
components/manufacturers-grid/item.tsx
View File

@ -18,7 +18,8 @@ const ManufacturerItem = ({
<ImageDisplay <ImageDisplay
fileId={manufacturer.logo as string} fileId={manufacturer.logo as string}
title={manufacturer.display_name || 'Logo'} title={manufacturer.display_name || 'Logo'}
className="aspect-2 h-auto w-auto" className="aspect-1 h-7"
unoptimized
/> />
</Suspense> </Suspense>
</div> </div>

3
components/page/image-display.tsx
View File

@ -8,10 +8,11 @@ const ImageDisplay = async ({
className, className,
...props ...props
}: { }: {
fileId: string; fileId?: string;
title: string; title: string;
className?: string; className?: string;
} & Omit<React.ComponentProps<typeof Image>, 'src' | 'alt'>) => { } & Omit<React.ComponentProps<typeof Image>, 'src' | 'alt'>) => {
if (!fileId) return null;
const image = await getImage(fileId); const image = await getImage(fileId);
return ( return (
<Image <Image

1
next.config.js
View File

@ -6,7 +6,6 @@ module.exports = {
}, },
images: { images: {
formats: ['image/avif', 'image/webp'], formats: ['image/avif', 'image/webp'],
dangerouslyAllowSVG: true,
remotePatterns: [ remotePatterns: [
{ {
protocol: 'https', protocol: 'https',