Merge pull request #80 from kleros/refactor/images-caching

alcercu · web-flow · commit f0d09ba6f5fc · 2025-02-11T15:35:10.000+01:00
refactor: images-loading
diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
@@ -2,13 +2,15 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
+    minimumCacheTTL: 31536000,
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
     remotePatterns: [
       {
         protocol: "https",
-        hostname: "delicate-eggs-595f0e58b8.media.strapiapp.com"
-      }
-    ]
-  }
+        hostname: "delicate-eggs-595f0e58b8.media.strapiapp.com",
+      },
+    ],
+  },
 };
 
 export default nextConfig;
diff --git a/frontend/src/app/for-lawyers/components/Hero.tsx b/frontend/src/app/for-lawyers/components/Hero.tsx
@@ -40,7 +40,7 @@ const Hero: React.FC = async () => {
         src={background.url}
         alt="Hero Image Background"
         fill
-        priority
+        unoptimized
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -7,7 +7,9 @@ import Footer from "@/components/Footer";
 import Navbar from "@/components/Navbar";
 import { navbarQuery, NavbarQueryType } from "@/queries/navbar";
 import "@/styles/globals.css";
+import { getHeroImgsProps } from "@/utils/getHeroImgsProps";
 import { request } from "@/utils/graphQLClient";
+import { HeroImagesQueryType, herosImagesQuery } from "@/queries/heroImages";
 
 const urbanist = Urbanist({
   weight: ["400", "500"],
@@ -20,9 +22,23 @@ export default async function RootLayout({
   children: React.ReactNode;
 }) {
   const navbarData = await request<NavbarQueryType>(navbarQuery);
+  const herosImgs = await request<HeroImagesQueryType>(herosImagesQuery);
+  const props = getHeroImgsProps(herosImgs);
 
   return (
     <html lang="en">
+      <head>
+        {props.map((prop) => (
+          <link
+            key={prop.props.alt}
+            rel="preload"
+            as="image"
+            imageSizes="100vw"
+            imageSrcSet={prop.props.srcSet}
+            href={prop.props.src}
+          ></link>
+        ))}
+      </head>
       <body className="min-w-80 bg-background-1 antialiased">
         <main className={clsx(urbanist.className)}>
           <Navbar {...{ navbarData }} />
diff --git a/frontend/src/components/BrandAssets/Hero.tsx b/frontend/src/components/BrandAssets/Hero.tsx
@@ -31,7 +31,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={heroData.background.url}
         alt="Hero Image Background"
         fill
-        priority
+        unoptimized
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
diff --git a/frontend/src/components/Community/hero.tsx b/frontend/src/components/Community/hero.tsx
@@ -34,7 +34,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
-        priority
+        unoptimized
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
diff --git a/frontend/src/components/Cooperative/hero.tsx b/frontend/src/components/Cooperative/hero.tsx
@@ -42,7 +42,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
-        priority
+        unoptimized
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
diff --git a/frontend/src/components/Earn/Hero.tsx b/frontend/src/components/Earn/Hero.tsx
@@ -49,7 +49,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
-        priority
+        unoptimized
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
diff --git a/frontend/src/components/ForBuilders/Hero.tsx b/frontend/src/components/ForBuilders/Hero.tsx
@@ -46,7 +46,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={heroData.background.url}
         alt="Hero Image Background"
         fill
-        priority
+        unoptimized
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
diff --git a/frontend/src/components/PNKToken/Hero.tsx b/frontend/src/components/PNKToken/Hero.tsx
@@ -35,7 +35,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
-        priority
+        unoptimized
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
diff --git a/frontend/src/components/ResearchDevelopment/Hero.tsx b/frontend/src/components/ResearchDevelopment/Hero.tsx
@@ -48,7 +48,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
-        priority
+        unoptimized
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
diff --git a/frontend/src/queries/heroImages.ts b/frontend/src/queries/heroImages.ts
@@ -0,0 +1,68 @@
+import { gql } from "graphql-request";
+
+export const herosImagesQuery = gql`
+  {
+    earnPageHero {
+      background {
+        name
+        url
+      }
+    }
+    forBuildersPageHero {
+      background {
+        name
+        url
+      }
+    }
+    forLawyersPageHero {
+      background {
+        name
+        url
+      }
+    }
+    communityPageHero {
+      background {
+        name
+        url
+      }
+    }
+    cooperativePageHero {
+      background {
+        name
+        url
+      }
+    }
+    rAndDPageHero {
+      background {
+        name
+        url
+      }
+    }
+    brandAssetsPageHero {
+      background {
+        name
+        url
+      }
+    }
+    pnkTokenPageHero {
+      background {
+        name
+        url
+      }
+    }
+  }
+`;
+type Hero = {
+  background: { name: string; url: string };
+};
+
+export type HeroImagesQueryType = {
+  earnPageHero: Hero;
+  forBuildersPageHero: Hero;
+  forLawyersPageHero: Hero;
+  communityPageHero: Hero;
+  cooperativePageHero: Hero;
+  rAndDPageHero: Hero;
+  brandAssetsPageHero: Hero;
+  pnkTokenPageHero: Hero;
+};
diff --git a/frontend/src/utils/getHeroImgsProps.ts b/frontend/src/utils/getHeroImgsProps.ts
@@ -0,0 +1,17 @@
+import { getImageProps } from "next/image";
+
+import { HeroImagesQueryType } from "@/queries/heroImages";
+
+export const getHeroImgsProps = (data: HeroImagesQueryType) => {
+  type Keys = keyof HeroImagesQueryType;
+  const keys = Object.keys(data) as Keys[];
+  return keys.map((key) =>
+    getImageProps({
+      // these should match the props we will define for Background Image in Heros.tsx
+      src: data[key].background.url,
+      alt: data[key].background.name,
+      fill: true,
+      unoptimized: true,
+    }),
+  );
+};
