From 984a616dd197220084e4d574ac9e3f148fdbce14 Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Thu, 19 Feb 2026 21:43:41 +0100
Subject: [PATCH] Fix hero image not showing when cached (check img.complete)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/components/HeroSection.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
index 7193ca0..eb0bc31 100644
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useCallback } from 'react'
 import { motion } from 'framer-motion'
 import { ChevronDown } from 'lucide-react'
 
@@ -11,12 +11,19 @@ interface HeroSectionProps {
 export default function HeroSection({ heroPhoto }: HeroSectionProps) {
   const [imageLoaded, setImageLoaded] = useState(false)
 
+  const imgRef = useCallback((node: HTMLImageElement | null) => {
+    if (node && node.complete) {
+      setImageLoaded(true)
+    }
+  }, [])
+
   return (
     <section className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden">
       {/* Background */}
       {heroPhoto ? (
         <div className="absolute inset-0">
           <img
+            ref={imgRef}
             src={`/api/files/${heroPhoto}`}
             alt="Maria Malejka"
             className="w-full h-full object-cover transition-opacity duration-1000 ease-in-out"