diff --git a/client/components/open/forms/OpenCompleteForm.vue b/client/components/open/forms/OpenCompleteForm.vue
index d3bd2421..a4c4b5f4 100644
--- a/client/components/open/forms/OpenCompleteForm.vue
+++ b/client/components/open/forms/OpenCompleteForm.vue
@@ -274,7 +274,11 @@ export default {
   watch: {
     'form.language': {
       handler(newLanguage) {
-        this.setLocale(newLanguage)
+        if (newLanguage && typeof newLanguage === 'string') {
+          this.setLocale(newLanguage)
+        } else {
+          this.setLocale('en')  // Default to English if invalid locale
+        }
       },
       immediate: true
     }
diff --git a/client/components/open/forms/components/AIFormLoadingMessages.vue b/client/components/open/forms/components/AIFormLoadingMessages.vue
new file mode 100644
index 00000000..ce0e9f17
--- /dev/null
+++ b/client/components/open/forms/components/AIFormLoadingMessages.vue
@@ -0,0 +1,97 @@
+<template>
+  <div 
+    v-motion
+    :initial="{ opacity: 0, height: 0 }"
+    :enter="{ opacity: 1, height: 52, transition: { duration: 300, ease: 'easeOut' } }"
+    :leave="{ opacity: 0, height: 0, transition: { duration: 300, ease: 'easeIn' } }"
+    class="overflow-hidden w-full"
+  >
+    <div 
+      v-motion
+      :initial="{ opacity: 0, scale: 0.95 }"
+      :enter="{ opacity: 1, scale: 1, transition: { duration: 300 } }"
+      class="flex items-center gap-3 bg-blue-50 px-4 py-3 rounded-lg w-full"
+    >
+      <div 
+        v-motion
+        class="w-7 h-7 rounded-full bg-gradient-to-r from-blue-500 to-blue-300 flex items-center justify-center text-base"
+        :initial="{ rotate: 0 }"
+        :enter="{ 
+          rotate: [-8, 8, -8, 8, 0],
+          transition: { 
+            repeat: Infinity,
+            duration: 1500,
+            ease: 'easeInOut',
+            times: [0, 0.25, 0.5, 0.75, 1]
+          }
+        }"
+      >
+        {{ currentEmoji }}
+      </div>
+      <span 
+        :key="currentMessage"
+        v-motion
+        :initial="{ opacity: 0, y: 5 }"
+        :enter="{ opacity: 1, y: 0, transition: { duration: 200 } }"
+        class="text-sm text-gray-700 font-medium"
+      >
+        {{ currentMessage }}
+      </span>
+      <span class="text-xs text-gray-500 ml-auto tabular-nums">{{ elapsedTime }}s</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const messages = [
+  { text: "Starting AI magic", emoji: "✨" },
+  { text: "Analyzing requirements", emoji: "🤔" },
+  { text: "Designing layout", emoji: "📐" },
+  { text: "Adding form fields", emoji: "📝" },
+  { text: "Fine-tuning validation", emoji: "🎯" },
+  { text: "Optimizing UX", emoji: "💫" },
+  { text: "Adding smart features", emoji: "🧠" },
+  { text: "Polishing design", emoji: "✨" },
+  { text: "Running final checks", emoji: "🔍" },
+  { text: "Almost ready", emoji: "🚀" },
+]
+
+const currentMessage = ref(messages[0].text)
+const currentEmoji = ref(messages[0].emoji)
+const messageIndex = ref(0)
+const startTime = ref(Date.now())
+const elapsedTime = ref(0)
+
+// Update message every 2.5 seconds
+const interval = setInterval(() => {
+  const nextIndex = (messageIndex.value + 1) % messages.length
+  messageIndex.value = nextIndex
+  currentMessage.value = messages[nextIndex].text
+  currentEmoji.value = messages[nextIndex].emoji
+}, 2500)
+
+// Update elapsed time every second
+const timeInterval = setInterval(() => {
+  elapsedTime.value = Math.floor((Date.now() - startTime.value) / 1000)
+}, 1000)
+
+onUnmounted(() => {
+  clearInterval(interval)
+  clearInterval(timeInterval)
+})
+</script>
+
+<style>
+.animate-shimmer {
+  animation: shimmer 2s infinite linear;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/client/components/pages/forms/create/CreateFormBaseModal.vue b/client/components/pages/forms/create/CreateFormBaseModal.vue
index 9f2fba8c..7bd15e8a 100644
--- a/client/components/pages/forms/create/CreateFormBaseModal.vue
+++ b/client/components/pages/forms/create/CreateFormBaseModal.vue
@@ -151,8 +151,14 @@
         help="Give us a description of the form you want to build (the more details the better)"
         placeholder="A simple contact form, with a name, email and message field"
       />
+      <div
+        v-if="loading"
+        class="my-4"
+      >
+        <AIFormLoadingMessages />
+      </div>
       <v-button
-        class="w-full"
+        class="w-full mt-4"
         :loading="loading"
         @click.prevent="generateForm"
       >
@@ -166,7 +172,12 @@
 </template>
 
 <script>
+import AIFormLoadingMessages from "~/components/open/forms/components/AIFormLoadingMessages.vue"
+
 export default {
+  components: {
+    AIFormLoadingMessages,
+  },
   props: {
     show: { type: Boolean, required: true },
   },