From 32436ae4a74f48a9559d48afc58c152e06ba05b6 Mon Sep 17 00:00:00 2001
From: Marcos <marcoscarlomagno1@gmail.com>
Date: Thu, 12 Dec 2024 10:43:54 -0300
Subject: [PATCH] persist iframe state

---
 packages/ui/src/DefenderDeployModal.svelte | 32 ++++++++++++++--------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/DefenderDeployModal.svelte b/packages/ui/src/DefenderDeployModal.svelte
index c3563f8b..5e3deffb 100644
--- a/packages/ui/src/DefenderDeployModal.svelte
+++ b/packages/ui/src/DefenderDeployModal.svelte
@@ -1,16 +1,24 @@
 <script lang="ts">
   import { fly } from 'svelte/transition';
-  import { elasticIn } from 'svelte/easing';
 
   const devMode = window.location.href.includes('localhost');
 
   export let isOpen = false;
-
   let loaded = false;
+  let showIframe = false;
 
   const handleLoad = () => {
     loaded = true;
   };
+
+  $: if (isOpen) {
+    // Show iframe after modal transition (450ms)
+    setTimeout(() => {
+      showIframe = true;
+    }, 450);
+  } else {
+    showIframe = false;
+  }
 </script>
 
 {#if isOpen}
@@ -24,14 +32,16 @@
           Loading...
         </div>
       {/if}
-
-      <iframe
-        id="defender-deploy"
-        title="Defender Deploy"
-        src={devMode ? 'http://localhost:5173' : 'https://defender-deploy-wizard.netlify.app/'}
-        class={`flex-grow border-none ${!loaded ? 'hidden' : ''}`}
-        on:load={handleLoad}
-      />
     </div>
   </div>
-{/if}
\ No newline at end of file
+{/if}
+
+<iframe
+  id="defender-deploy"
+  title="Defender Deploy"
+  src={devMode ? 'http://localhost:5173' : 'https://defender-deploy-wizard.netlify.app/'}
+  class={`fixed z-30 right-3.5 w-[360px] h-[calc(100vh-84px)] border-none 
+    ${!showIframe ? 'invisible' : ''} 
+    ${!loaded ? 'hidden' : ''}`}
+  on:load={handleLoad}
+/>