← back to Jutewallpaper

hero: flash-free R4 (flip after cells paint + clear grid) — yoloforever cycle 2

fe0264d5f0fb1ed83fca30c80559e8acd098e786 · 2026-09-15 18:47:43 -0700 · Steve Abrams

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UxvvaJ7p6VRZ4RzKDaBXqK

Files touched

• M public/index.html

Diff

commit fe0264d5f0fb1ed83fca30c80559e8acd098e786
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Sep 15 18:47:43 2026 -0700

    hero: flash-free R4 (flip after cells paint + clear grid) — yoloforever cycle 2
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_01UxvvaJ7p6VRZ4RzKDaBXqK
---
 public/index.html | 43 ++++++++++++++++++++-----------------------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/public/index.html b/public/index.html
index 60670df..e7f6626 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1560,30 +1560,27 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
     var prev=parseInt(localStorage.getItem(k)||'0',10);
     var next=(prev+1)%2;
     localStorage.setItem(k,String(next));
-    if (prev>0) {
-      var mode = next===0 ? 'huge' : 'four-square';
-      document.documentElement.dataset.heroMode = mode;
-      if (mode === 'four-square') {
-        // Try to populate four-square from existing product list (newest 4)
-        fetch('/api/products?limit=4&page=1').then(r=>r.ok?r.json():null).then(j=>{
-          if (!j || !j.items || j.items.length < 4) {
-            document.documentElement.dataset.heroMode = 'huge';
-            console.warn('dw-hero-stale: insufficient items for four-square, falling back to huge');
-            return;
-          }
-          var grid = document.getElementById('heroGrid');
-          if (!grid) return;
-          j.items.slice(0,4).forEach(function(it){
-            var d = document.createElement('div');
-            d.className = 'cell';
-            var img = (it.image_url || it.image || '/hero-bg.jpg');
-            d.style.backgroundImage = "url('" + img + "')";
-            grid.appendChild(d);
-          });
-        }).catch(function(){
-          document.documentElement.dataset.heroMode = 'huge';
+    if (prev>0 && next===1) {
+      // four-square visit: stay on the server default (huge) until the 4 cells are
+      // painted, THEN flip data-hero-mode. Both modes share .cinema min-height, so the
+      // swap is CLS-free AND flash-free (never shows an empty grid / hidden .cinema-bg).
+      fetch('/api/products?limit=4&page=1').then(r=>r.ok?r.json():null).then(j=>{
+        if (!j || !j.items || j.items.length < 4) {
+          console.warn('dw-hero-stale: insufficient items for four-square, staying on huge');
+          return;
+        }
+        var grid = document.getElementById('heroGrid');
+        if (!grid) return;
+        grid.innerHTML = ''; // guard: never double-append onto an existing grid
+        j.items.slice(0,4).forEach(function(it){
+          var d = document.createElement('div');
+          d.className = 'cell';
+          var img = (it.image_url || it.image || '/hero-bg.jpg');
+          d.style.backgroundImage = "url('" + img + "')";
+          grid.appendChild(d);
         });
-      }
+        document.documentElement.dataset.heroMode = 'four-square'; // flip after cells ready
+      }).catch(function(){ /* keep huge */ });
     }
   } catch(e) { /* localStorage disabled — keep server default (huge) */ }
 })();

← 18ccd66 hero: remove hero-4grid.js collision, R4 alternating block i  ·  back to Jutewallpaper  ·  TK-11787: restore jutewallpaper site identity (undo retrowal 6336905 →