From 221299732b52469fa008c5a4c2b71b6f4b48493a Mon Sep 17 00:00:00 2001
From: Dominik Zborowski <dominik.zborowski@gmail.com>
Date: Thu, 7 Nov 2024 00:07:23 +0100
Subject: [PATCH 1/3] Add missing type

---
 domains/grid/schema/xWidgetSchema.ts | 1 +
 1 file changed, 1 insertion(+)

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>

From 718c9b491f38e49f9e8ff72c25ee6f4ba5419329 Mon Sep 17 00:00:00 2001
From: Dominik Zborowski <dominik.zborowski@gmail.com>
Date: Thu, 7 Nov 2024 00:08:38 +0100
Subject: [PATCH 2/3] Fix refresh

---
 domains/grid/components/GridWidgetInstagram.vue | 2 +-
 domains/grid/components/GridWidgetX.vue         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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()

From 8e88116412c075570f74e5712d711bc89ca37a39 Mon Sep 17 00:00:00 2001
From: Dominik Zborowski <dominik.zborowski@gmail.com>
Date: Thu, 7 Nov 2024 00:10:54 +0100
Subject: [PATCH 3/3] Reload iframe on resize

---
 domains/grid/components/GridWidgetIframe.vue | 35 +++++++++++++++++---
 1 file changed, 30 insertions(+), 5 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>