From 20adfe076f467f46afbd3a8fd81d58f3b60c77bd Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Fri, 11 Apr 2025 16:04:55 +0200
Subject: [PATCH] Refactor Captcha Input Rendering in OpenForm Component

- Wrapped the CaptchaInput component in a ClientOnly block to ensure it only renders on the client side, preventing server-side rendering issues.
- Added a fallback template with a USkeleton component to provide a loading state while the CaptchaInput is being processed.

These changes aim to enhance the user experience by improving the rendering logic of the Captcha input, ensuring it behaves correctly in different environments.
---
 client/components/open/forms/OpenForm.vue | 25 ++++++++++++++---------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/client/components/open/forms/OpenForm.vue b/client/components/open/forms/OpenForm.vue
index d30954f1..94415d50 100644
--- a/client/components/open/forms/OpenForm.vue
+++ b/client/components/open/forms/OpenForm.vue
@@ -57,16 +57,21 @@
     </transition>
 
     <!-- Captcha -->
-    <div class="mb-3 px-2 mt-4 mx-auto w-max">
-      <CaptchaInput
-        v-if="form.use_captcha && isLastPage && hasCaptchaProviders && isCaptchaProviderAvailable"
-        ref="captcha"
-        :provider="form.captcha_provider"
-        :form="dataForm"
-        :language="form.language"
-        :dark-mode="darkMode"
-      />
-    </div>
+    
+    <ClientOnly>
+      <div v-if="form.use_captcha && isLastPage && hasCaptchaProviders && isCaptchaProviderAvailable" class="mb-3 px-2 mt-4 mx-auto w-max">
+        <CaptchaInput
+          ref="captcha"
+          :provider="form.captcha_provider"
+          :form="dataForm"
+          :language="form.language"
+          :dark-mode="darkMode"
+        />
+      </div>
+      <template #fallback>
+          <USkeleton class="h-[78px] w-[304px]" />
+        </template>
+    </ClientOnly>
 
     <!--  Submit, Next and previous buttons  -->
     <div class="flex flex-wrap justify-center w-full">