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

@@ -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>
     `,
-    `
+    js,
-      document.documentElement.dataset.theme = ${JSON.stringify(theme)};
-
-      ${js}
-    `,
   );
 }
 

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
     });
   }
 

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();
     };