transitions-different-on-preview.diff

diff --git a/assets/turbo/turbo-helper.js b/assets/turbo/turbo-helper.js
index a7083a9..005e5f6 100644
--- a/assets/turbo/turbo-helper.js
+++ b/assets/turbo/turbo-helper.js
@@ -15,16 +15,32 @@ const TurboHelper = class {
             // fade out the old body
             document.body.classList.add('turbo-loading');
         });
+
         document.addEventListener('turbo:before-render', (event) => {
-            // when we are *about* to render, start us faded out
-            event.detail.newBody.classList.add('turbo-loading');
+            if (this.isPreviewRendered()) {
+                // this is a preview that has been instantly swapped
+                // remove .turbo-loading so the preview starts fully opaque
+                event.detail.newBody.classList.remove('turbo-loading');
+                // start fading out 1 frame later after opacity starts full
+                requestAnimationFrame(() => {
+                    document.body.classList.add('turbo-loading');
+                });
+            } else {
+                // when we are *about* to render a fresh page
+                // we should already be faded out, so start us faded out
+                event.detail.newBody.classList.add('turbo-loading');
+            }
         });
         document.addEventListener('turbo:render', () => {
-            // after rendering, we first allow the turbo-loading class to set the low opacity
-            // THEN, one frame later, we remove the turbo-loading class, which allows the fade in
-            requestAnimationFrame(() => {
-               document.body.classList.remove('turbo-loading');
-            });
+            if (!this.isPreviewRendered()) {
+                // if this is a preview, then we do nothing: stay faded out
+                // after rendering the REAL page, we first allow the .turbo-loading to
+                // instantly start the page at lower opacity. THEN remove the class
+                // one frame later, which allows the fade in
+                requestAnimationFrame(() => {
+                    document.body.classList.remove('turbo-loading');
+                });
+            }
         });
     }
 
@@ -55,6 +71,10 @@ const TurboHelper = class {
     initializeWeatherWidget() {
         __weatherwidget_init();
     }
+
+    isPreviewRendered() {
+        return document.documentElement.hasAttribute('data-turbo-preview');
+    }
 }
 
 export default new TurboHelper();