From 4cc6e9ca922a3090d4a267efd219d881bb1aaa78 Mon Sep 17 00:00:00 2001
From: Dominik Zborowski <dominik.zborowski@gmail.com>
Date: Thu, 7 Nov 2024 01:58:17 +0100
Subject: [PATCH] fix: iframe refresh on resize (#531)

---
 domains/grid/components/GridWidgetIframe.vue  | 35 ++++++++++++++++---
 .../grid/components/GridWidgetInstagram.vue   |  2 +-
 domains/grid/components/GridWidgetX.vue       |  2 +-
 domains/grid/schema/xWidgetSchema.ts          |  1 +
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/domains/grid/components/GridWidgetIframe.vue b/domains/grid/components/GridWidgetIframe.vue
index 50975c14..fecbead9 100644
--- a/domains/grid/components/GridWidgetIframe.vue
+++ b/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>
diff --git a/domains/grid/components/GridWidgetInstagram.vue b/domains/grid/components/GridWidgetInstagram.vue
index 36a3f704..bc5fbd24 100644
--- a/domains/grid/components/GridWidgetInstagram.vue
+++ b/domains/grid/components/GridWidgetInstagram.vue
@@ -18,7 +18,7 @@ const processInstagramEmbeds = () => {
 }
 
 watch(
-  () => props,
+  () => props.src,
   async () => {
     embedSrc.value = ''
     await nextTick()
diff --git a/domains/grid/components/GridWidgetX.vue b/domains/grid/components/GridWidgetX.vue
index 3aeb8429..bf7659f6 100644
--- a/domains/grid/components/GridWidgetX.vue
+++ b/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()
diff --git a/domains/grid/schema/xWidgetSchema.ts b/domains/grid/schema/xWidgetSchema.ts
index a460e8cf..188e2938 100644
--- a/domains/grid/schema/xWidgetSchema.ts
+++ b/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>