From 1249736a840e80bf25d0784f119ed3af67fd480d Mon Sep 17 00:00:00 2001
From: Malte Ubl <malte.ubl@gmail.com>
Date: Mon, 11 Nov 2024 07:34:20 -0800
Subject: [PATCH] Optimize image usage on homepage

Uses the new `getImageProps` function in `next/image` to provide `srcset` data to the `motion.img` component that is being used on the homepage.

This PR is untested since I don't have secrets to run the app.
---
 components/ui/layout-grid.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/ui/layout-grid.tsx b/components/ui/layout-grid.tsx
index 94f79e5..a0e786a 100644
--- a/components/ui/layout-grid.tsx
+++ b/components/ui/layout-grid.tsx
@@ -2,7 +2,7 @@
 import React, { useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { cn } from "@/lib/utils";
-import Image, { StaticImageData } from "next/image";
+import Image, { getImageProps, StaticImageData } from "next/image";
 
 type Card = {
   id: number;
@@ -60,15 +60,22 @@ export const LayoutGrid = ({ cards }: { cards: Card[] }) => {
 };
 
 const ImageComponent = ({ card }: { card: Card }) => {
+  const { props: imageProps } = getImageProps({
+    src:
+      typeof card.thumbnail === "string" ? card.thumbnail : card.thumbnail.src,
+    alt: "thumbnail",
+    // TODO: It would be good to specifiy a proper sizes argument for the grid.
+  });
   return (
     <motion.img
       layoutId={`image-${card.id}-image`}
-      src={typeof card.thumbnail === 'string' ? card.thumbnail : card.thumbnail.src} // Handle both types
+      srcSet={imageProps.srcSet} // Handle both types
+      src={imageProps.src} // Handle both types
       height="500"
       width="500"
       className={cn(
         "object-cover object-top inset-0 h-full w-full transition duration-200",
-        "md:absolute" 
+        "md:absolute"
       )}
       alt="thumbnail"
     />