fix: screen flashing during iframe navigation (#55)

nuxt · Dec 6, 2023 · de6f2ba · de6f2ba
1 parent 2d8b525
commit de6f2ba
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git 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
@@ -43,6 +43,10 @@ watch(
   syncColorMode,
   { flush: 'sync' },
 )
+
+defineExpose({
+  iframe,
+})
 </script>
 
 <template>

diff --git 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,