chore(frontend): update button loading states and improve form submission handling

Author: Lasim

package-lock.json

@@ -178,12 +178,13 @@ function getSetting(key: string) {
               <Button
                 type="button"
                 @click="handleTestConnection"
-                :disabled="!canTestConnection || isTestingConnection"
+                :disabled="!canTestConnection"
+                :loading="isTestingConnection"
                 variant="outline"
                 size="sm"
               >
                 <TestTube class="h-4 w-4 mr-2" />
-                {{ isTestingConnection ? t('githubApp.connectionTest.button.testing') : t('githubApp.connectionTest.button.test') }}
+                {{ t('githubApp.connectionTest.button.test') }}
               </Button>
             </div>
 
@@ -226,10 +227,11 @@ function getSetting(key: string) {
             </div>
             <Button
               type="submit"
-              :disabled="!hasChanges || isSaving"
+              :disabled="!hasChanges"
+              :loading="isSaving"
               class="min-w-[120px]"
             >
-              {{ isSaving ? t('githubApp.form.saving') : t('githubApp.form.saveChanges') }}
+              {{ t('githubApp.form.saveChanges') }}
             </Button>
           </div>
         </form>

services/frontend/src/components/globalSettings/GitHubAppSettings.vue

@@ -298,13 +298,14 @@ function getSetting(key: string) {
             <Button
               type="button"
               @click="handleTestEmail"
-              :disabled="!canTestConnection || isTestingConnection"
+              :disabled="!canTestConnection"
+              :loading="isTestingConnection"
               variant="outline"
               size="sm"
               class="w-full sm:w-auto"
             >
               <TestTube class="h-4 w-4 mr-2" />
-              {{ isTestingConnection ? t('smtp.emailTest.button.testing') : t('smtp.emailTest.button.test') }}
+              {{ t('smtp.emailTest.button.test') }}
             </Button>
 
             <!-- Test Status -->
@@ -349,10 +350,11 @@ function getSetting(key: string) {
             </div>
             <Button
               type="submit"
-              :disabled="!hasChanges || isSaving"
+              :disabled="!hasChanges"
+              :loading="isSaving"
               class="min-w-[120px]"
             >
-              {{ isSaving ? t('smtp.form.saving') : t('smtp.form.saveChanges') }}
+              {{ t('smtp.form.saveChanges') }}
             </Button>
           </div>
         </form>

services/frontend/src/components/globalSettings/SmtpSettings.vue

@@ -47,11 +47,11 @@ const spinnerSize = computed(() => {
   >
     <Loader2
       v-if="loading"
-      :class="cn(spinnerSize, 'animate-spin')"
+      :class="cn(spinnerSize, 'animate-spin mr-2')"
     />
     <template v-if="loading && loadingText">
       {{ loadingText }}
     </template>
-    <slot v-else-if="!loading" />
+    <slot v-else />
   </Primitive>
 </template>

services/frontend/src/components/ui/button/Button.vue

@@ -26,6 +26,7 @@ const route = useRoute()
 const settingGroups = ref<GlobalSettingGroup[]>([])
 const isLoading = ref(true)
 const error = ref<string | null>(null)
+const isSubmitting = ref(false)
 
 const apiUrl = getEnv('VITE_DEPLOYSTACK_BACKEND_URL') || '' // Fallback to empty string if not set
 
@@ -194,6 +195,8 @@ async function handleSubmit(event: Event) {
     }
   })
 
+  isSubmitting.value = true
+  
   try {
     if (!apiUrl) {
       throw new Error(t('globalSettings.errors.savingConfigNotSet'))
@@ -254,6 +257,8 @@ async function handleSubmit(event: Event) {
       description: errorMessage
     })
     console.error('Failed to save settings:', err)
+  } finally {
+    isSubmitting.value = false
   }
 }
 </script>
@@ -329,9 +334,12 @@ async function handleSubmit(event: Event) {
                     <p v-if="setting.is_encrypted" class="text-xs text-muted-foreground">{{ t('globalSettings.form.encryptedValue') }}</p>
                   </div>
 
-                  <Button type="submit">
-                    {{ t('globalSettings.form.saveChanges') }}
-                  </Button>
+          <Button 
+            type="submit"
+            :loading="isSubmitting"
+          >
+            {{ t('globalSettings.form.saveChanges') }}
+          </Button>
                 </form>
                 <div v-else-if="selectedGroup && (!selectedGroup.settings || selectedGroup.settings.length === 0)">
                   <p class="text-sm text-muted-foreground">{{ t('globalSettings.form.noSettings') }}</p>