From c6c7ad3fca7ec7fa8c20517ba92ee54b51166591 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 3 Apr 2026 12:13:26 +0200
Subject: [PATCH] portfolio : load mockup before gallery animation images.
 related to #55

Defer GalleryAnimation rendering until mockup image is fully loaded.
Ensures mockup has bandwidth priority over gallery images.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/views/Portfolio.svelte | 39 +++++++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/views/Portfolio.svelte b/src/views/Portfolio.svelte
index e6d7ef6..b8b8967 100644
--- a/src/views/Portfolio.svelte
+++ b/src/views/Portfolio.svelte
@@ -11,6 +11,8 @@
   // --- State ---
   let currentIndex = $state(0)
   let sectionEl    = $state(null)
+  let mockupEl     = $state(null)
+  let mockupReady  = $state(false)
 
   // --- Derived ---
   const isActive          = $derived(slides.active?.id === 'portfolio')
@@ -128,6 +130,21 @@
     }
   })
 
+  // --- Mockup priority: render gallery only after mockup is loaded ---
+  $effect(() => {
+    mockupReady = false
+    if (!mockupEl) return
+    const img = mockupEl.querySelector('img')
+    if (!img) return
+    if (img.complete && img.naturalWidth > 0) {
+      mockupReady = true
+      return
+    }
+    const onLoad = () => { mockupReady = true }
+    img.addEventListener('load', onLoad, { once: true })
+    return () => img.removeEventListener('load', onLoad)
+  })
+
   // --- Effect: reset when slide deactivated ---
   // wasActive évite que clearAnchor() s'exécute au montage initial
   // (isActive est false avant l'initialisation des slides)
@@ -147,9 +164,11 @@
 </script>
 
 {#key currentIndex}
-<div class="portfolio-gallery mobile-only" aria-hidden="true">
-  <GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} backgroundImage={currentProject.galleryBackgroundImage} mode={currentProject.galleryAnimationMode} secondsPerImage={currentProject.secondsPerImage} />
-</div>
+  {#if mockupReady}
+    <div class="portfolio-gallery mobile-only" aria-hidden="true">
+      <GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} backgroundImage={currentProject.galleryBackgroundImage} mode={currentProject.galleryAnimationMode} secondsPerImage={currentProject.secondsPerImage} />
+    </div>
+  {/if}
 {/key}
 
 <section
@@ -160,13 +179,15 @@
 >
   {#if currentProject}
     {#key currentIndex}
-      <!-- Galerie animation (gauche desktop / plein écran mobile) -->
-      <div class="portfolio-gallery desktop-only" aria-hidden="true">
-        <GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} backgroundImage={currentProject.galleryBackgroundImage} mode={currentProject.galleryAnimationMode} secondsPerImage={currentProject.secondsPerImage} />
-      </div>
+      <!-- Galerie animation (gauche desktop / plein écran mobile) — attend le mockup -->
+      {#if mockupReady}
+        <div class="portfolio-gallery desktop-only" aria-hidden="true">
+          <GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} backgroundImage={currentProject.galleryBackgroundImage} mode={currentProject.galleryAnimationMode} secondsPerImage={currentProject.secondsPerImage} />
+        </div>
+      {/if}
 
-      <!-- Mockup device (centre) -->
-      <div class="portfolio-mockup portfolio-mockup--{currentProject.galleryAnimationMode}">
+      <!-- Mockup device (centre) — prioritaire -->
+      <div class="portfolio-mockup portfolio-mockup--{currentProject.galleryAnimationMode}" bind:this={mockupEl}>
         <ResponsivePicture
           src={currentProject.mockup}
           srcset={currentProject.mockupSrcset}