fix: enhance Coinify and Letsexchange widgets with loading states and…

app/app.vue

@@ -4,13 +4,12 @@ import { NuxtLayout } from '#components'
 useHead({
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-    { charset: 'utf-8' }
+    { charset: 'utf-8' },
   ],
   link: [
-    { rel: 'icon', type: 'image/png', href: '/favicon-32x32.png' }
-  ]
+    { rel: 'icon', type: 'image/png', href: '/favicon-32x32.png' },
+  ],
 })
-
 </script>
 
 <template>

app/components/CoinifyWidget.vue

@@ -1,9 +1,41 @@
 <script setup lang="ts">
 const runtimeConfig = useRuntimeConfig()
+const frameKey = ref(0)
+
+// Ensure this component only runs on client-side
+const mounted = ref(false)
+
+onMounted(() => {
+  mounted.value = true
+  frameKey.value = Date.now()
+})
+
+// Handle component reactivation (when navigating back to this page)
+onActivated(() => {
+  frameKey.value = Date.now()
+})
 </script>
 
 <template>
   <div class="min-w-screen-sm w-[398px] min-h-[659px]">
-    <iframe :src="runtimeConfig.public.coinifyUrl" width="100%" height="100%" allow="camera;fullscreen;accelerometer;gyroscope;magnetometer;payment" />
+    <ClientOnly>
+      <iframe
+        v-if="mounted"
+        :key="frameKey"
+        :src="runtimeConfig.public.coinifyUrl"
+        width="100%"
+        height="100%"
+        allow="camera;fullscreen;accelerometer;gyroscope;magnetometer;payment"
+      />
+      <template #fallback>
+        <div class="flex items-center justify-center w-full h-[659px] bg-gray-100 rounded-xl">
+          <div class="text-center">
+            <div class="animate-pulse mb-2 font-semibold">
+              Loading payment widget...
+            </div>
+          </div>
+        </div>
+      </template>
+    </ClientOnly>
   </div>
 </template>

app/components/LetsexchangeWidget.vue

@@ -1,9 +1,42 @@
 <script setup lang="ts">
 const runtimeConfig = useRuntimeConfig()
+const frameKey = ref(0)
+
+// Ensure this component only runs on client-side
+const mounted = ref(false)
+
+onMounted(() => {
+  mounted.value = true
+  frameKey.value = Date.now()
+})
+
+// Handle component reactivation (when navigating back to this page)
+onActivated(() => {
+  frameKey.value = Date.now()
+})
 </script>
 
 <template>
   <div id="lets_widget_Jqu53Q2FL2yQ81cj" class="lets-widget min-w-screen-sm max-w-[400px] min-h-[480px]">
-    <iframe :src="runtimeConfig.public.letsexchangeUrl" width="100%" height="100%" frameBorder="0" allow="clipboard-read; clipboard-write" />
+    <ClientOnly>
+      <iframe
+        v-if="mounted"
+        :key="frameKey"
+        :src="runtimeConfig.public.letsexchangeUrl"
+        width="100%"
+        height="100%"
+        frameBorder="0"
+        allow="clipboard-read; clipboard-write"
+      />
+      <template #fallback>
+        <div class="flex items-center justify-center w-full h-[480px] bg-gray-100 rounded-xl">
+          <div class="text-center">
+            <div class="animate-pulse mb-2 font-semibold">
+              Loading exchange widget...
+            </div>
+          </div>
+        </div>
+      </template>
+    </ClientOnly>
   </div>
 </template>

app/pages/index.vue

@@ -94,8 +94,8 @@ function scrollToWidget() {
 
       <!-- Widget -->
       <div ref="widgetRef" data-section="widget" class="flex justify-center">
-        <CoinifyWidget v-if="!swap" />
-        <LetsexchangeWidget v-else />
+        <CoinifyWidget v-if="!swap" :key="`coinify-${swap}`" />
+        <LetsexchangeWidget v-else :key="`letsexchange-${swap}`" />
       </div>
     </section>