fix: iframe refresh on resize (#531)

domains/grid/components/GridWidgetIframe.vue

@@ -1,24 +1,49 @@
 <script setup lang="ts">
+import { useDebounceFn, useResizeObserver } from '@vueuse/core'
+
 type Props = {
   src: string
   allow?: string
   referrerpolicy?: IframeReferrerPolicy
   allowfullscreen?: boolean
+  widget?: GridWidget
+}
+
+const props = defineProps<Props>()
+const embedSrc = ref(props.src)
+const iframeRef = ref<HTMLElement | null>(null)
+const isLoaded = ref(false)
+
+const handleLoad = () => {
+  isLoaded.value = true
+}
+
+const reloadIframe = () => {
+  embedSrc.value = ''
+  const onResize = useDebounceFn(() => {
+    embedSrc.value = props.src
+  }, 100)
+  onResize()
 }
 
-defineProps<Props>()
+useResizeObserver(iframeRef, useDebounceFn(reloadIframe, 100))
 </script>
 
 <template>
-  <div class="h-full p-3">
+  <div ref="iframeRef" class="relative h-full p-3">
+    <AppLoader
+      v-if="!isLoaded"
+      class="absolute left-[calc(50%-20px)] top-[calc(50%-20px)]"
+    />
     <iframe
-      :src="src"
+      :src="embedSrc"
       :allow="allow"
       :referrerpolicy="referrerpolicy"
       :allowfullscreen="allowfullscreen"
       frameborder="0"
-      loading="lazy"
       class="size-full overflow-hidden rounded-8"
-    ></iframe>
+      @load="handleLoad"
+    >
+    </iframe>
   </div>
 </template>

domains/grid/components/GridWidgetInstagram.vue

@@ -18,7 +18,7 @@ const processInstagramEmbeds = () => {
 }
 
 watch(
-  () => props,
+  () => props.src,
   async () => {
     embedSrc.value = ''
     await nextTick()

domains/grid/components/GridWidgetX.vue

@@ -13,7 +13,7 @@ const embedSrc = ref('')
 
 // each change (add, edit) of the widget require to "reinstall" the twitter script
 watch(
-  () => props,
+  () => props.src,
   async () => {
     embedSrc.value = ''
     await nextTick()

domains/grid/schema/xWidgetSchema.ts

@@ -34,3 +34,4 @@ export const xWidgetBuilderSchema = xWidgetSchema
   )
 
 export type XWidgetProperties = z.input<typeof xWidgetSchema>
+export type XType = z.infer<typeof xType>