From 0471e07633965c07df63e1be35feaf3699dff024 Mon Sep 17 00:00:00 2001
From: Chloe <pinkcloudvnn@gmail.com>
Date: Tue, 11 Jun 2024 20:28:07 +0700
Subject: [PATCH] fix: optimize image loading on homepage

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
---
 components/home-page/why-choose.tsx     | 1 +
 components/manufacturers-grid/index.tsx | 4 ++--
 components/manufacturers-grid/item.tsx  | 3 ++-
 components/page/image-display.tsx       | 3 ++-
 next.config.js                          | 1 -
 5 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/home-page/why-choose.tsx b/components/home-page/why-choose.tsx
index 2c9c885e7..f5c191f16 100644
--- a/components/home-page/why-choose.tsx
+++ b/components/home-page/why-choose.tsx
@@ -29,6 +29,7 @@ const WhyChoose = async () => {
                 fileId={reason.file as string}
                 title={(reason.title || reason.name) as string}
                 className="h-[60px] w-[60px]"
+                sizes="60px"
               />
             </Suspense>
             <div className="mx-3 h-[100px] min-w-0.5 bg-gray-200" />
diff --git a/components/manufacturers-grid/index.tsx b/components/manufacturers-grid/index.tsx
index 190e74bdd..bd309f71e 100644
--- a/components/manufacturers-grid/index.tsx
+++ b/components/manufacturers-grid/index.tsx
@@ -21,7 +21,7 @@ const ManufacturersGrid = ({ manufacturers, variant = 'home' }: ManufacturersGri
       </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">
         {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} />
             {variant === 'home' && <ButtonGroup manufacturer={manufacturer} />}
           </div>
@@ -36,7 +36,7 @@ const ManufacturersGrid = ({ manufacturers, variant = 'home' }: ManufacturersGri
         {manufacturers
           .toSorted((a, b) => a.display_name!.localeCompare(b.display_name!))
           .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} />
               {variant === 'home' && <ButtonGroup manufacturer={manufacturer} />}
             </div>
diff --git a/components/manufacturers-grid/item.tsx b/components/manufacturers-grid/item.tsx
index 1db5a52ef..8a4130e8f 100644
--- a/components/manufacturers-grid/item.tsx
+++ b/components/manufacturers-grid/item.tsx
@@ -18,7 +18,8 @@ const ManufacturerItem = ({
           <ImageDisplay
             fileId={manufacturer.logo as string}
             title={manufacturer.display_name || 'Logo'}
-            className="aspect-2 h-auto w-auto"
+            className="aspect-1 h-7"
+            unoptimized
           />
         </Suspense>
       </div>
diff --git a/components/page/image-display.tsx b/components/page/image-display.tsx
index 0a49b79a7..465deaccb 100644
--- a/components/page/image-display.tsx
+++ b/components/page/image-display.tsx
@@ -8,10 +8,11 @@ const ImageDisplay = async ({
   className,
   ...props
 }: {
-  fileId: string;
+  fileId?: string;
   title: string;
   className?: string;
 } & Omit<React.ComponentProps<typeof Image>, 'src' | 'alt'>) => {
+  if (!fileId) return null;
   const image = await getImage(fileId);
   return (
     <Image
diff --git a/next.config.js b/next.config.js
index 2906c2213..8bab35c40 100644
--- a/next.config.js
+++ b/next.config.js
@@ -6,7 +6,6 @@ module.exports = {
   },
   images: {
     formats: ['image/avif', 'image/webp'],
-    dangerouslyAllowSVG: true,
     remotePatterns: [
       {
         protocol: 'https',