Swap preview to viewer only on viewer-ready postMessage

app.js

@@ -217,20 +217,9 @@
         lazyMedia.src = lazyMedia.dataset.src;
         lazyMedia.removeAttribute('data-src');
       }
-      // Load iframe (will swap over preview when ready)
+      // Load iframe (viewer-ready postMessage will handle the swap)
       var iframe = card.querySelector('iframe.lazy-iframe');
       if (iframe && iframe.dataset.src) {
-        if (iframe.classList.contains('card-viewer-hidden')) {
-          iframe.addEventListener('load', function onLoad() {
-            iframe.removeEventListener('load', onLoad);
-            setTimeout(function () {
-              iframe.classList.remove('card-viewer-hidden');
-              iframe.classList.add('card-viewer-ready');
-              var preview = iframe.parentNode.querySelector('.card-preview');
-              if (preview) preview.classList.add('card-preview-hidden');
-            }, 1500);
-          });
-        }
         iframe.src = iframe.dataset.src;
       }
     }
@@ -352,6 +341,21 @@
   // ------------------------------------
   var lazyObserver = null;
 
+  // Listen for viewer-ready messages from WASM iframes
+  window.addEventListener('message', function (e) {
+    if (e.data && e.data.type === 'viewer-ready' && e.data.clipId) {
+      var card = grid.querySelector('.clip-card[data-clip-id="' + e.data.clipId + '"]');
+      if (!card) return;
+      var iframe = card.querySelector('iframe.card-viewer-hidden');
+      if (iframe) {
+        iframe.classList.remove('card-viewer-hidden');
+        iframe.classList.add('card-viewer-ready');
+        var preview = card.querySelector('.card-preview');
+        if (preview) preview.classList.add('card-preview-hidden');
+      }
+    }
+  });
+
   function observeLazyImages() {
     if (!lazyObserver) {
       lazyObserver = new IntersectionObserver(function (entries) {
@@ -359,19 +363,6 @@
           if (entry.isIntersecting) {
             var el = entry.target;
             if (el.dataset.src) {
-              // For hidden iframes behind previews, set up the swap
-              if (el.classList.contains('card-viewer-hidden')) {
-                el.addEventListener('load', function onLoad() {
-                  el.removeEventListener('load', onLoad);
-                  // Wait a moment for WASM to render first frame
-                  setTimeout(function () {
-                    el.classList.remove('card-viewer-hidden');
-                    el.classList.add('card-viewer-ready');
-                    var preview = el.parentNode.querySelector('.card-preview');
-                    if (preview) preview.classList.add('card-preview-hidden');
-                  }, 1500);
-                });
-              }
               el.src = el.dataset.src;
             }
             lazyObserver.unobserve(el);