fix(ui): debounce reactivity

client/app.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useDebounceFn } from '@vueuse/core'
 import { containerWidth, description, path, refreshSources, rpc } from './util/logic'
 import { devtoolsClient } from '~/composables/devtools-client'
 
@@ -21,6 +22,11 @@ const constrainsWidth = computed(() => {
 
 const config = await rpc.useServerConfig()
 const options = await fetchOptions()
+
+const setPath = useDebounceFn((e) => {
+  path.value = e.target.value
+  refreshSources()
+}, 1000)
 </script>
 
 <template>
@@ -101,7 +107,7 @@ const options = await fetchOptions()
             Path
           </div>
           <div class="flex items-center space-x-1">
-            <NTextInput v-model="path" placeholder="Search..." n="primary" @input="refreshSources" />
+            <NTextInput :model-value="path" placeholder="Search..." n="primary" @input="setPath" />
           </div>
         </div>
         <div v-if="description" class="text-xs opacity-70">

client/components/IFrameLoader.vue

@@ -8,7 +8,7 @@ const props = defineProps({
   description: String,
 })
 
-defineEmits(['refresh'])
+const src = ref(props.src)
 
 const iframe = ref()
 const timeTakenMs = ref(0)
@@ -30,11 +30,12 @@ const setSource = useDebounceFn(() => {
     frame.style.opacity = '1'
     timeTakenMs.value = Date.now() - now
   }
-  frame.src = `${props.src}&scale=${scale}`
+  frame.src = `${src.value}&scale=${scale}`
 }, 200)
 
 onMounted(() => {
-  watch(() => props.src, (src) => {
+  watch(() => props.src, (val) => {
+    src.value = val
     setSource()
   }, {
     immediate: true,

client/components/ImageLoader.vue

@@ -7,8 +7,6 @@ const props = defineProps({
   description: String,
 })
 
-defineEmits(['refresh'])
-
 const image = ref()
 const timeTakenMs = ref(0)
 

client/pages/png.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { absoluteBasePath, refreshSources, refreshTime, rpc } from '~/util/logic'
+import { absoluteBasePath, refreshTime, rpc } from '~/util/logic'
 
 const config = await rpc.useServerConfig()
 
@@ -16,6 +16,5 @@ const options = await fetchOptions()
     :src="`${absoluteBasePath}/__og_image__/og.png?timestamp=${refreshTime}`"
     :aspect-ratio="aspectRatio"
     description="[PNG] Generated in %sms using Satori & Resvg."
-    @refresh="refreshSources"
   />
 </template>

client/pages/svg.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { absoluteBasePath, refreshSources, refreshTime, rpc } from '~/util/logic'
+import { absoluteBasePath, refreshTime, rpc } from '~/util/logic'
 
 const config = await rpc.useServerConfig()
 
@@ -16,6 +16,5 @@ const options = await fetchOptions()
     :src="`${absoluteBasePath}/__og_image__/svg?timestamp=${refreshTime}`"
     :aspect-ratio="aspectRatio"
     description="[SVG] Generated in %sms using Satori."
-    @refresh="refreshSources"
   />
 </template>

client/util/logic.ts

@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import { joinURL } from 'ufo'
+import { useDebounceFn } from '@vueuse/core'
 import type { PlaygroundClientFunctions } from '../../src/types'
 
 export const refreshTime = ref(Date.now())
@@ -11,9 +12,9 @@ export const path = ref('/')
 export const optionsPath = computed(() => joinURL(path.value as string, '__og_image__/options'))
 export const vnodePath = computed(() => joinURL(path.value as string, '__og_image__/vnode'))
 
-export function refreshSources() {
+export const refreshSources = useDebounceFn(() => {
   refreshTime.value = Date.now()
-}
+}, 200)
 
 const clientFunctions: PlaygroundClientFunctions = {
   refresh() {