From 892849c30ba92d972e9dfec7bf33ed615f6e8f68 Mon Sep 17 00:00:00 2001
From: MrMugame <40832361+MrMugame@users.noreply.github.com>
Date: Sat, 8 Jun 2024 13:32:35 +0200
Subject: [PATCH] Fixes the white flash for widget iframes & Make use of panel
 api (#882)

* Fix widget iframes flashing when loading

* Set the data-theme attribute for all panels
---
 plugs/markdown/preview.ts               | 8 +-------
 web/components/panel.tsx                | 1 +
 web/components/widget_sandbox_iframe.ts | 2 ++
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/plugs/markdown/preview.ts b/plugs/markdown/preview.ts
index ba282b58..c3343b46 100644
--- a/plugs/markdown/preview.ts
+++ b/plugs/markdown/preview.ts
@@ -26,8 +26,6 @@ export async function updateMarkdownPreview() {
     },
   });
   const customStyles = await editor.getUiOption("customStyles");
-  const darkMode = await clientStore.get("darkMode");
-  const theme = darkMode ? "dark" : "light";
   await editor.showPanel(
     "rhs",
     2,
@@ -40,11 +38,7 @@ export async function updateMarkdownPreview() {
 
       <div id="root" class="sb-preview">${html}</div>
     `,
-    `
-      document.documentElement.dataset.theme = ${JSON.stringify(theme)};
-
-      ${js}
-    `,
+    js,
   );
 }
 
diff --git a/web/components/panel.tsx b/web/components/panel.tsx
index db147888..c2878199 100644
--- a/web/components/panel.tsx
+++ b/web/components/panel.tsx
@@ -21,6 +21,7 @@ export function Panel({
       type: "html",
       html: config.html,
       script: config.script,
+      theme: document.getElementsByTagName("html")[0].dataset.theme
     });
   }
 
diff --git a/web/components/widget_sandbox_iframe.ts b/web/components/widget_sandbox_iframe.ts
index c6e982b6..1628affb 100644
--- a/web/components/widget_sandbox_iframe.ts
+++ b/web/components/widget_sandbox_iframe.ts
@@ -52,10 +52,12 @@ export function prepareSandboxIFrame(): PreloadedIFrame {
   // Empty page with current origin. Handled this differently before, but "dock apps" in Safari (PWA implementation) seem to have various restrictions
   // This one works in all browsers, although it's probably less secure
   iframe.src = "about:blank";
+  iframe.style.visibility = "hidden";
 
   const ready = new Promise<void>((resolve) => {
     iframe.onload = () => {
       iframe.contentDocument!.write(panelHtml);
+      iframe.style.visibility = "visible";
       // Now ready to use
       resolve();
     };