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

69cb00f0b28586af97cd51058fa72edc62387545 · 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 69cb00f0b28586af97cd51058fa72edc62387545
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 5736563..f54b343 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) */ }
 })();

← a95cefc hero: remove hero-4grid.js collision, R4 alternating block i · back to Raffiawallcoverings · TK-11787: restore raffiawallcoverings site identity (undo re f5a607a →