Add link rel=preload to Hero

hasparus · hasparus · commit 6ddbfff8915f · 2025-08-08T23:35:41.000+02:00
diff --git a/src/app/conf/2025/components/image-loaded.tsx b/src/app/conf/2025/components/image-loaded.tsx
@@ -7,14 +7,9 @@ const _cache = new Map<string, HTMLImageElement>()
 
 export interface ImageLoadedProps extends React.HTMLAttributes<HTMLDivElement> {
   image: string | StaticImageData
-  fetchPriority?: "high" | "low" | "auto"
 }
 
-export function ImageLoaded({
-  image,
-  fetchPriority = "auto",
-  ...rest
-}: ImageLoadedProps) {
+export function ImageLoaded({ image, ...rest }: ImageLoadedProps) {
   const [loaded, setLoaded] = useState(false)
   const src = typeof image === "string" ? image : image.src
 
@@ -32,11 +27,10 @@ export function ImageLoaded({
     } else {
       img = new Image()
       img.src = src
-      img.fetchPriority = fetchPriority
       img.addEventListener("load", () => setLoaded(true))
       _cache.set(src, img)
     }
-  }, [src, fetchPriority])
+  }, [src])
 
   return <div data-loaded={alreadyLoaded || loaded} {...rest} />
 }
diff --git a/src/components/index-page/hero/index.tsx b/src/components/index-page/hero/index.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/app/conf/_design-system/button"
 import { ImageLoaded } from "@/app/conf/2025/components/image-loaded"
 
 import logoBlurred from "./logo-blurred.webp"
+import Head from "next/head"
 
 export function Hero() {
   return (
@@ -42,9 +43,17 @@ export function Hero() {
 function HeroStripes() {
   return (
     <div className="pointer-events-none relative overflow-hidden max-lg:h-[210px]">
+      <Head>
+        <link
+          rel="preload"
+          as="image"
+          href={logoBlurred.src}
+          type="image/webp"
+          fetchPriority="high"
+        />
+      </Head>
       <ImageLoaded
         image={logoBlurred}
-        fetchPriority="high"
         className="relative h-full bg-gradient-to-b from-pri-base to-pri-lighter opacity-0 transition-opacity duration-[1.5s] [mask-position:center_12%] [mask-size:110%] data-[loaded=true]:opacity-100 dark:to-pri-base sm:[mask-size:auto_300%] lg:[mask-position:7%_7%] lg:[mask-size:200%]"
         style={{
           maskImage: `url(${logoBlurred.src})`,
