Add fetchPriority to ImageLoaded and use it in Hero

Author: hasparus

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

@@ -7,9 +7,14 @@ const _cache = new Map<string, HTMLImageElement>()
 
 export interface ImageLoadedProps extends React.HTMLAttributes<HTMLDivElement> {
   image: string | StaticImageData
+  fetchPriority?: "high" | "low" | "auto"
 }
 
-export function ImageLoaded({ image, ...rest }: ImageLoadedProps) {
+export function ImageLoaded({
+  image,
+  fetchPriority = "auto",
+  ...rest
+}: ImageLoadedProps) {
   const [loaded, setLoaded] = useState(false)
   const src = typeof image === "string" ? image : image.src
 
@@ -27,10 +32,11 @@ export function ImageLoaded({ image, ...rest }: ImageLoadedProps) {
     } else {
       img = new Image()
       img.src = src
+      img.fetchPriority = fetchPriority
       img.addEventListener("load", () => setLoaded(true))
       _cache.set(src, img)
     }
-  }, [src])
+  }, [src, fetchPriority])
 
   return <div data-loaded={alreadyLoaded || loaded} {...rest} />
 }

src/components/index-page/hero.tsx

@@ -44,6 +44,7 @@ function HeroStripes() {
     <div className="pointer-events-none relative overflow-hidden max-lg:h-[210px]">
       <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})`,

src/components/index-page/proven-solution/index.tsx

@@ -103,11 +103,11 @@ function ProvenSolutionCard({
 }
 
 function Stripes() {
-  // todo: rotate to top right corner on mobile
   return (
     <ImageLoaded
       role="presentation"
       image={blurBean}
+      fetchPriority="low"
       // eslint-disable-next-line tailwindcss/no-unnecessary-arbitrary-value
       className="pointer-events-none absolute inset-0 opacity-0 transition-[translate] duration-[400ms] ease-linear [mask-position:center_calc(100%+65vw)] [mask-size:200%] data-[loaded=true]:opacity-100 max-lg:rotate-[180deg] max-lg:scale-x-[-1] lg:[mask-position:center_500px] lg:[mask-size:150%] xl:translate-y-1/2 xl:[mask-position:center_top] xl:max-3xl:translate-y-[50%]"
       style={{
@@ -117,7 +117,6 @@ function Stripes() {
         WebkitMaskRepeat: "no-repeat",
       }}
     >
-      {/* todo: ensure colors in dark mode are correct */}
       <StripesDecoration
         evenClassName="bg-[linear-gradient(180deg,hsl(var(--color-pri-light)/0.2)_20%,hsl(var(--color-pri-base))_150%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-pri-base)/.9)_20%,hsl(var(--color-pri-darker))_150%)]"
         oddClassName="bg-[linear-gradient(180deg,hsl(var(--color-pri-light))_20%,hsl(var(--color-pri-lighter)/.9)_150%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-pri-darker)/.9)_20%,hsl(var(--color-pri-base)/.8)_150%)]"