Fix safari rendering issue for Cairo, Stellar,Stylus (#495)

Co-authored-by: Eric Lau <[email protected]>

Author: CoveMB

packages/ui/src/cairo/App.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher, tick } from 'svelte';
 
     import hljs from './highlightjs';
 
@@ -27,12 +27,20 @@
 
     const dispatch = createEventDispatcher();
 
+    let showCode = true;
+    async function allowRendering() {
+      showCode = false;
+      await tick();
+      showCode = true;
+    }
+
     export let initialTab: string | undefined = 'ERC20';
 
     export let tab: Kind = sanitizeKind(initialTab);
     $: {
       tab = sanitizeKind(tab);
       dispatch('tab-change', tab);
+      allowRendering();
     };
 
     export let initialOpts: InitialOptions = {};
@@ -73,6 +81,7 @@
             throw e;
           }
         }
+        allowRendering();
       }
     }
 
@@ -183,7 +192,13 @@
       </div>
     </div>
     <div class="output rounded-r-3xl flex flex-col grow overflow-auto h-[calc(100vh-84px)]">
-      <pre class="flex flex-col grow basis-0 overflow-auto"><code class="hljs -cairo grow overflow-auto p-4">{@html highlightedCode}</code></pre>
+      <pre class="flex flex-col grow basis-0 overflow-auto">
+        {#if showCode}
+          <code class="hljs -cairo grow overflow-auto p-4">
+            {@html highlightedCode}
+          </code>
+        {/if}
+      </pre>
     </div>
   </div>
 </div>

packages/ui/src/stellar/App.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher, tick } from 'svelte';
 
     import hljs from './highlightjs';
 
@@ -20,13 +20,21 @@
     import { InitialOptions } from '../common/initial-options';
 
     const dispatch = createEventDispatcher();
+    
+    let showCode = true;
+    async function allowRendering() {
+      showCode = false;
+      await tick();
+      showCode = true;
+    }
 
     export let initialTab: string | undefined = 'Fungible';
 
     export let tab: Kind = sanitizeKind(initialTab);
     $: {
       tab = sanitizeKind(tab);
       dispatch('tab-change', tab);
+      allowRendering();
     };
 
     export let initialOpts: InitialOptions = {};
@@ -59,6 +67,7 @@
             throw e;
           }
         }
+        allowRendering();
       }
     }
 
@@ -133,7 +142,12 @@
       </div>
     </div>
     <div class="output rounded-r-3xl flex flex-col grow overflow-auto h-[calc(100vh-84px)]">
-      <pre class="flex flex-col grow basis-0 overflow-auto"><code class="hljs -stellar grow overflow-auto p-4">{@html highlightedCode}</code></pre>
+      <pre class="flex flex-col grow basis-0 overflow-auto">
+        {#if showCode}
+          <code class="hljs -stellar grow overflow-auto p-4">
+            {@html highlightedCode}
+          </code>
+        {/if}
     </div>
   </div>
 </div>

packages/ui/src/stylus/App.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher, tick } from 'svelte';
 
     import hljs from './highlightjs';
 
@@ -23,12 +23,20 @@
 
     const dispatch = createEventDispatcher();
 
+    let showCode = true;
+    async function allowRendering() {
+      showCode = false;
+      await tick();
+      showCode = true;
+    }
+
     export let initialTab: string | undefined = 'ERC20';
 
     export let tab: Kind = sanitizeKind(initialTab);
     $: {
       tab = sanitizeKind(tab);
       dispatch('tab-change', tab);
+      allowRendering();
     };
 
     export let initialOpts: InitialOptions = {};
@@ -67,6 +75,7 @@
             throw e;
           }
         }
+        allowRendering();
       }
     }
 
@@ -153,7 +162,13 @@
       </div>
     </div>
     <div class="output rounded-r-3xl flex flex-col grow overflow-auto h-[calc(100vh-84px)]">
-      <pre class="flex flex-col grow basis-0 overflow-auto"><code class="hljs -stylus grow overflow-auto p-4">{@html highlightedCode}</code></pre>
+      <pre class="flex flex-col grow basis-0 overflow-auto">
+        {#if showCode}
+          <code class="hljs -stylus grow overflow-auto p-4">
+            {@html highlightedCode}
+          </code>
+        {/if}
+      </pre>
     </div>
   </div>
 </div>