fix: Safari rendering issues with code preview when switching tabs or scrolling (#489)

Author: metanodreamer

packages/ui/src/solidity/App.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher, tick } from 'svelte';
 
     import hljs from './highlightjs';
 
@@ -37,11 +37,18 @@
 
     const dispatch = createEventDispatcher();
 
+    async function allowRendering() {
+      showCode = false;
+      await tick();
+      showCode = true;
+    }
+
     export let initialTab: string | undefined = 'ERC20';
 
     export let tab: Kind = sanitizeKind(initialTab);
     $: {
       tab = sanitizeKind(tab);
+      allowRendering();
       dispatch('tab-change', tab);
     };
 
@@ -55,6 +62,8 @@
 
     let contract: Contract = new ContractBuilder(initialOpts.name ?? 'MyToken');
 
+    let showCode = true;
+
     $: functionCall && applyFunctionCall()
 
     $: opts = allOpts[tab];
@@ -87,6 +96,7 @@
             throw e;
           }
         }
+        allowRendering();
       }
     }
 
@@ -441,7 +451,9 @@
       </div>
       {/if}
       <pre class="flex flex-col grow basis-0 overflow-auto">
+        {#if showCode}
         <code class="hljs -solidity grow overflow-auto p-4 {hasErrors ? 'no-select' : ''}">{@html highlightedCode}</code>
+        {/if}
       </pre>
       <DefenderDeployModal isOpen={showDeployModal} />
     </div>