From de6f2ba5caeae81069db7a9107e2f91563a58c6f Mon Sep 17 00:00:00 2001
From: Cheah Shao Qi <52320846+sqcheah@users.noreply.github.com>
Date: Wed, 6 Dec 2023 17:53:03 +0800
Subject: [PATCH] fix: screen flashing during iframe navigation (#55)

---
 components/PanelPreview.vue              | 9 +++++----
 components/PanelPreviewClient.client.vue | 4 ++++
 stores/playground.ts                     | 8 +++++++-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/PanelPreview.vue b/components/PanelPreview.vue
index d22f8e6b..d599377d 100644
--- a/components/PanelPreview.vue
+++ b/components/PanelPreview.vue
@@ -2,21 +2,22 @@
 const play = usePlaygroundStore()
 
 const inputUrl = ref<string>('')
-const inner = ref<{ iframe?: Ref<HTMLIFrameElement | undefined> }>()
+const inner = ref<{ iframe?: HTMLIFrameElement | undefined }>()
 
 // auto update inputUrl when location value changed
 syncRef(computed(() => play.previewLocation.fullPath), inputUrl, { direction: 'ltr' })
 
 function refreshIframe() {
-  if (play.previewUrl && inner.value?.iframe?.value) {
-    inner.value.iframe.value.src = play.previewUrl
+  if (play.previewUrl && inner.value?.iframe) {
+    play.updatePreviewUrl()
+    inner.value.iframe.src = play.previewUrl
     inputUrl.value = play.previewLocation.fullPath
   }
 }
 
 function navigate() {
   play.previewLocation.fullPath = inputUrl.value
-
+  play.updatePreviewUrl()
   const activeElement = document.activeElement
   if (activeElement instanceof HTMLElement)
     activeElement.blur()
diff --git a/components/PanelPreviewClient.client.vue b/components/PanelPreviewClient.client.vue
index e26f8ec3..21f8392a 100644
--- a/components/PanelPreviewClient.client.vue
+++ b/components/PanelPreviewClient.client.vue
@@ -43,6 +43,10 @@ watch(
   syncColorMode,
   { flush: 'sync' },
 )
+
+defineExpose({
+  iframe,
+})
 </script>
 
 <template>
diff --git a/stores/playground.ts b/stores/playground.ts
index 6eb6c225..7d5e7578 100644
--- a/stores/playground.ts
+++ b/stores/playground.ts
@@ -23,7 +23,11 @@ export const usePlaygroundStore = defineStore('playground', () => {
     origin: '',
     fullPath: '',
   })
-  const previewUrl = computed(() => previewLocation.value.origin + previewLocation.value.fullPath)
+  const previewUrl = ref('')
+
+  function updatePreviewUrl() {
+    previewUrl.value = previewLocation.value.origin + previewLocation.value.fullPath
+  }
 
   const colorMode = useColorMode()
 
@@ -61,6 +65,7 @@ export const usePlaygroundStore = defineStore('playground', () => {
             origin: url,
             fullPath: '/',
           }
+          updatePreviewUrl()
         }
       })
 
@@ -171,6 +176,7 @@ export const usePlaygroundStore = defineStore('playground', () => {
     files,
     webcontainer,
     previewUrl,
+    updatePreviewUrl,
     previewLocation,
     restartServer: startServer,
     downloadZip,