Try optimizing the hero blur

Author: hasparus

src/app/conf/2025/components/image-loaded.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import type { StaticImageData } from "next/image"
-import { useEffect, useState } from "react"
+import { useEffect, useState, useRef } from "react"
 
 const _cache = new Map<string, HTMLImageElement>()
 
@@ -13,6 +13,7 @@ export interface ImageLoadedProps extends React.HTMLAttributes<HTMLDivElement> {
 export function ImageLoaded({
   image,
   fetchPriority = "auto",
+  style,
   ...rest
 }: ImageLoadedProps) {
   const [loaded, setLoaded] = useState(false)
@@ -38,5 +39,14 @@ export function ImageLoaded({
     }
   }, [src, fetchPriority])
 
-  return <div data-loaded={alreadyLoaded || loaded} {...rest} />
+  return (
+    <div
+      data-loaded={alreadyLoaded || loaded}
+      style={{
+        ["--src" as string]: alreadyLoaded || loaded ? `url(${src})` : "",
+        ...style,
+      }}
+      {...rest}
+    />
+  )
 }

src/components/index-page/hero/index.tsx

@@ -57,8 +57,8 @@ function HeroStripes() {
         image={logoBlurred}
         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})`,
-          WebkitMaskImage: `url(${logoBlurred.src})`,
+          maskImage: `var(--src)`,
+          WebkitMaskImage: `var(--src)`,
           maskRepeat: "no-repeat",
           WebkitMaskRepeat: "no-repeat",
         }}