From fc624c07009be8c113a382fbe8b16f99c71f6b4c Mon Sep 17 00:00:00 2001
From: Dmitri <dtroshchenkov@gmail.com>
Date: Tue, 14 Apr 2026 15:43:50 +0400
Subject: [PATCH] reduced flashlite after video transition

---
 .../src/components/RuntimePresentation.tsx    | 23 +++++++++++--------
 frontend/src/lib/browserUtils.ts              |  2 +-
 frontend/src/pages/constructor.tsx            | 23 +++++++++++--------
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/RuntimePresentation.tsx b/frontend/src/components/RuntimePresentation.tsx
index 83e9025..308a376 100644
--- a/frontend/src/components/RuntimePresentation.tsx
+++ b/frontend/src/components/RuntimePresentation.tsx
@@ -330,17 +330,22 @@ export default function RuntimePresentation({
   }, [selectedPage?.background_image_url, selectedPage?.background_video_url]);
 
   // Video transition overlay removal - instant (no fade) when background is ready
-  // This ensures UI elements have time to appear before we remove the transition overlay
+  // Uses double RAF to ensure browser has painted the new background before removing overlay
   useEffect(() => {
     if (pendingTransitionComplete && isBackgroundReady) {
-      // Background is ready - instantly remove transition overlay (no fade)
-      const video = transitionVideoRef.current;
-      if (video) {
-        video.removeAttribute('src');
-        video.load();
-      }
-      setTransitionPreview(null);
-      setPendingTransitionComplete(false);
+      // Wait for paint cycle to complete before removing overlay
+      // Double RAF ensures the new background is fully rendered
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          const video = transitionVideoRef.current;
+          if (video) {
+            video.removeAttribute('src');
+            video.load();
+          }
+          setTransitionPreview(null);
+          setPendingTransitionComplete(false);
+        });
+      });
     }
   }, [pendingTransitionComplete, isBackgroundReady]);
 
diff --git a/frontend/src/lib/browserUtils.ts b/frontend/src/lib/browserUtils.ts
index 5cfc7da..89a036f 100644
--- a/frontend/src/lib/browserUtils.ts
+++ b/frontend/src/lib/browserUtils.ts
@@ -53,7 +53,7 @@ export const getBrowserInfo = (): BrowserInfo => {
 
   // iOS Safari detection
   const isIOSSafari =
-    /iPad|iPhone|iPod/.test(ua) && !('MSStream' in window as unknown);
+    /iPad|iPhone|iPod/.test(ua) && !(('MSStream' in window) as unknown);
 
   // Chrome detection (includes Chromium-based browsers except Edge)
   const isChrome = /chrome/i.test(ua) && !/edg/i.test(ua);
diff --git a/frontend/src/pages/constructor.tsx b/frontend/src/pages/constructor.tsx
index f3d4140..e0fb408 100644
--- a/frontend/src/pages/constructor.tsx
+++ b/frontend/src/pages/constructor.tsx
@@ -373,17 +373,22 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
   });
 
   // Video transition overlay removal - instant (no fade) when background is ready
-  // This ensures UI elements have time to appear before we remove the transition overlay
+  // Uses double RAF to ensure browser has painted the new background before removing overlay
   useEffect(() => {
     if (pendingTransitionComplete && isBackgroundReady) {
-      // Background is ready - instantly remove transition overlay (no fade)
-      const video = transitionVideoRef.current;
-      if (video) {
-        video.removeAttribute('src');
-        video.load();
-      }
-      closeTransitionPreview();
-      setPendingTransitionComplete(false);
+      // Wait for paint cycle to complete before removing overlay
+      // Double RAF ensures the new background is fully rendered
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          const video = transitionVideoRef.current;
+          if (video) {
+            video.removeAttribute('src');
+            video.load();
+          }
+          closeTransitionPreview();
+          setPendingTransitionComplete(false);
+        });
+      });
     }
   }, [pendingTransitionComplete, isBackgroundReady, closeTransitionPreview]);