feat(frontend): add loading state and error handling to form submissions

Author: Lasim

services/frontend/src/components/admin/mcp-catalog/McpServerAddFormWizard.vue

@@ -226,15 +226,6 @@ const canSubmit = computed(() => {
          canProceedFromClaudeConfig.value
 })
 
-// Dynamic button text based on props or defaults
-const submitText = computed(() => {
-  if (props.submitButtonText) return props.submitButtonText
-  if (isSubmitting.value) {
-    return t('mcpCatalog.form.navigation.creating')
-  }
-  return t('mcpCatalog.form.navigation.submit')
-})
-
 const cancelText = computed(() => {
   return props.cancelButtonText || t('mcpCatalog.form.navigation.cancel')
 })
@@ -361,14 +352,14 @@ const submitForm = async () => {
     isSubmitting.value = true
     submitError.value = null
 
-    // Emit the form data to parent component
-    emit('submit', formData.value)
+    // Emit the form data to parent component and wait for completion
+    await emit('submit', formData.value)
 
   } catch (error) {
     submitError.value = error instanceof Error ? error.message : 'Failed to submit form'
-  } finally {
     isSubmitting.value = false
   }
+  // Note: isSubmitting will be reset by parent after successful redirect
 }
 
 // Form persistence using event bus
@@ -482,9 +473,11 @@ onUnmounted(() => {
         <Button
           v-else
           @click="submitForm"
-          :disabled="!canSubmit || isSubmitting"
+          :disabled="!canSubmit"
+          :loading="isSubmitting"
+          :loading-text="t('mcpCatalog.form.navigation.creating')"
         >
-          {{ submitText }}
+          {{ t('mcpCatalog.form.navigation.submit') }}
         </Button>
       </div>
     </div>

services/frontend/src/components/admin/mcp-categories/CategoryModal.vue

@@ -295,12 +295,11 @@ const handleSortOrderChange = () => {
           </Button>
           <Button
             type="submit"
-            :disabled="!isFormValid || isSubmitting"
+            :disabled="!isFormValid"
+            :loading="isSubmitting"
+            :loading-text="t('mcpCategories.modal.saving')"
           >
-            {{ isSubmitting
-              ? t('mcpCategories.modal.saving')
-              : (isEditing ? t('mcpCategories.modal.update') : t('mcpCategories.modal.create'))
-            }}
+            {{ isEditing ? t('mcpCategories.modal.update') : t('mcpCategories.modal.create') }}
           </Button>
         </AlertDialogFooter>
       </form>

services/frontend/src/views/ForgotPassword.vue

@@ -196,8 +196,13 @@ const navigateToLogin = () => {
               </FormItem>
             </FormField>
 
-            <Button type="submit" class="w-full" :disabled="isLoading">
-              {{ isLoading ? $t('forgotPassword.buttons.loading') : $t('forgotPassword.buttons.submit') }}
+            <Button 
+              type="submit" 
+              class="w-full" 
+              :loading="isLoading"
+              :loading-text="$t('forgotPassword.buttons.loading')"
+            >
+              {{ $t('forgotPassword.buttons.submit') }}
             </Button>
           </form>
         </CardContent>

services/frontend/src/views/Login.vue

@@ -271,8 +271,13 @@ onMounted(async () => {
               </FormItem>
             </FormField>
 
-            <Button type="submit" class="w-full" :disabled="isLoading">
-              {{ isLoading ? $t('login.buttons.loading') : $t('login.buttons.submit') }}
+            <Button 
+              type="submit" 
+              class="w-full" 
+              :loading="isLoading"
+              :loading-text="$t('login.buttons.loading')"
+            >
+              {{ $t('login.buttons.submit') }}
             </Button>
           </form>
 

services/frontend/src/views/Register.vue

@@ -377,8 +377,13 @@ onMounted(async () => {
               </FormItem>
             </FormField>
 
-            <Button type="submit" class="w-full mt-6" :disabled="isLoading">
-              {{ isLoading ? $t('register.buttons.loading') : $t('register.buttons.submit') }}
+            <Button 
+              type="submit" 
+              class="w-full mt-6" 
+              :loading="isLoading"
+              :loading-text="$t('register.buttons.loading')"
+            >
+              {{ $t('register.buttons.submit') }}
             </Button>
           </form>
 

services/frontend/src/views/ResetPassword.vue

@@ -250,8 +250,13 @@ onMounted(() => {
               </FormItem>
             </FormField>
 
-            <Button type="submit" class="w-full" :disabled="isLoading">
-              {{ isLoading ? $t('resetPassword.buttons.loading') : $t('resetPassword.buttons.submit') }}
+            <Button 
+              type="submit" 
+              class="w-full" 
+              :loading="isLoading"
+              :loading-text="$t('resetPassword.buttons.loading')"
+            >
+              {{ $t('resetPassword.buttons.submit') }}
             </Button>
           </form>
         </CardContent>

services/frontend/src/views/admin/mcp-server-catalog/add.vue

@@ -117,7 +117,13 @@ const handleSubmit = async (formData: McpServerAddFormData) => {
     await router.push('/admin/mcp-server-catalog')
 
   } catch (error) {
-    // Re-throw error to let the wizard handle it
+    // Show error toast
+    const errorMessage = error instanceof Error ? error.message : 'Failed to create MCP server'
+    toast.error(t('mcpCatalog.messages.createError'), {
+      description: errorMessage
+    })
+    
+    // Re-throw error to let the wizard handle it and reset loading state
     throw error
   }
 }