fix: optimize image loading on homepage

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

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" />

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>

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>

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

next.config.js

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