feat(frontend): add spinner component and replace loading indicators

Author: Lasim

services/frontend/src/components/admin/UserActionsGroup.vue

@@ -3,6 +3,7 @@ import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { toast } from 'vue-sonner'
 import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
 import { 
   AlertDialog,
   AlertDialogAction,
@@ -88,12 +89,11 @@ const handlePasswordReset = async () => {
           <AlertDialogTrigger as-child>
             <Button
               variant="outline"
-              :disabled="!canResetPassword"
-              :loading="isLoading"
-              :loading-text="t('adminUsers.userDetail.actions.forceResetPassword')"
+              :disabled="!canResetPassword || isLoading"
               :title="!canResetPassword ? t('adminUsers.userDetail.actions.resetPasswordDisabled') : undefined"
               class="justify-start"
             >
+              <Spinner v-if="isLoading" class="mr-2" />
               {{ t('adminUsers.userDetail.actions.forceResetPassword') }}
             </Button>
           </AlertDialogTrigger>
@@ -115,11 +115,11 @@ const handlePasswordReset = async () => {
                 {{ t('adminUsers.userDetail.actions.resetPasswordConfirm.cancel') }}
               </AlertDialogCancel>
               <AlertDialogAction as-child>
-                <Button 
-                  @click="handlePasswordReset" 
-                  :loading="isLoading"
-                  :loading-text="t('adminUsers.userDetail.actions.resetPasswordConfirm.confirm')"
+                <Button
+                  @click="handlePasswordReset"
+                  :disabled="isLoading"
                 >
+                  <Spinner v-if="isLoading" class="mr-2" />
                   {{ t('adminUsers.userDetail.actions.resetPasswordConfirm.confirm') }}
                 </Button>
               </AlertDialogAction>

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

@@ -3,6 +3,7 @@
 import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { ProgressBars } from '@/components/ui/progress-bars'
 import { FileText, Github, Settings } from 'lucide-vue-next'
@@ -554,11 +555,10 @@ const submitForm = async () => {
         <Button
           v-if="currentStep === 0"
           @click="handleGitHubStepNext"
-          :disabled="!canProceedFromGitHub"
-          :loading="isFetchingGitHub"
-          :loading-text="t('mcpCatalog.form.navigation.fetching')"
+          :disabled="!canProceedFromGitHub || isFetchingGitHub"
           class="min-w-[120px]"
         >
+          <Spinner v-if="isFetchingGitHub" class="mr-2" />
           {{ t('mcpCatalog.form.navigation.next') }}
         </Button>
 
@@ -575,10 +575,9 @@ const submitForm = async () => {
         <Button
           v-else
           @click="submitForm"
-          :disabled="!canSubmit"
-          :loading="isSubmitting"
-          :loading-text="t('mcpCatalog.form.navigation.creating')"
+          :disabled="!canSubmit || isSubmitting"
         >
+          <Spinner v-if="isSubmitting" class="mr-2" />
           {{ t('mcpCatalog.form.navigation.submit') }}
         </Button>
       </div>

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

@@ -15,6 +15,7 @@
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { ProgressBars } from '@/components/ui/progress-bars'
 import { FileText, GitBranch, Code, Settings, CheckCircle, BookOpen } from 'lucide-vue-next'
@@ -39,13 +40,15 @@ interface Props {
   submitButtonText?: string
   cancelButtonText?: string
   serverId?: string
+  isSubmitting?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   mode: 'create',
   submitButtonText: '',
   cancelButtonText: '',
-  serverId: ''
+  serverId: '',
+  isSubmitting: false
 })
 
 // Emits
@@ -141,7 +144,7 @@ const progressPercentage = computed(() => {
 
 // Progress title based on current step
 const progressTitle = computed(() => {
-  if (isSubmitting.value) {
+  if (props.isSubmitting || internalIsSubmitting.value) {
     return props.mode === 'edit'
       ? t('mcpCatalog.form.navigation.updating')
       : t('mcpCatalog.form.navigation.creating')
@@ -163,14 +166,14 @@ const progressTitle = computed(() => {
 // Progress variant based on state
 const progressVariant = computed(() => {
   if (repositoryFetchError.value || submitError.value) return 'destructive'
-  if (isSubmitting.value) return 'default' // Keep default while submitting
+  if (props.isSubmitting || internalIsSubmitting.value) return 'default' // Keep default while submitting
   // Only show success after actual completion (would need to be handled by parent component)
   return 'default'
 })
 
 // State
 const currentStep = ref(0)
-const isSubmitting = ref(false)
+const internalIsSubmitting = ref(false)
 const submitError = ref<string | null>(null)
 const isFetchingRepository = ref(false)
 const repositoryFetchError = ref<string | null>(null)
@@ -653,10 +656,20 @@ watch(
   }
 )
 
+// Reset internal submitting state when parent signals completion
+watch(
+  () => props.isSubmitting,
+  (newValue) => {
+    if (!newValue) {
+      internalIsSubmitting.value = false
+    }
+  }
+)
+
 // Form submission with fresh data from actual storage keys
 const submitForm = async () => {
   try {
-    isSubmitting.value = true
+    internalIsSubmitting.value = true
     submitError.value = null
 
     // Get fresh data from ALL storage keys being used by components
@@ -745,9 +758,9 @@ const submitForm = async () => {
   } catch (error) {
     console.error('Form submission error:', error)
     submitError.value = error instanceof Error ? error.message : 'Failed to submit form'
-  } finally {
-    isSubmitting.value = false
+    internalIsSubmitting.value = false
   }
+  // Note: Don't reset internalIsSubmitting in finally - parent controls final state via prop
 }
 
 // Lifecycle
@@ -771,7 +784,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   // Save current state as draft when component unmounts (unless submitting)
-  if (!isSubmitting.value) {
+  if (!props.isSubmitting && !internalIsSubmitting.value) {
     saveDraft()
   }
 })
@@ -860,11 +873,10 @@ onUnmounted(() => {
         <Button
           v-if="currentStep === 0"
           @click="handleRepositoryStepNext"
-          :disabled="!canProceedFromRepository"
-          :loading="isFetchingRepository"
-          :loading-text="t('mcpCatalog.form.navigation.fetching')"
+          :disabled="!canProceedFromRepository || isFetchingRepository"
           class="min-w-[120px]"
         >
+          <Spinner v-if="isFetchingRepository" class="mr-2" />
           {{ t('mcpCatalog.form.navigation.next') }}
         </Button>
 
@@ -880,9 +892,9 @@ onUnmounted(() => {
         <Button
           v-else
           @click="submitForm"
-          :loading="isSubmitting"
-          :loading-text="props.mode === 'edit' ? t('mcpCatalog.form.navigation.updating') : t('mcpCatalog.form.navigation.creating')"
+          :disabled="props.isSubmitting || internalIsSubmitting"
         >
+          <Spinner v-if="props.isSubmitting || internalIsSubmitting" class="mr-2" />
           {{ props.mode === 'edit' ? t('mcpCatalog.form.navigation.update') : t('mcpCatalog.form.navigation.submit') }}
         </Button>
       </div>

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

@@ -12,6 +12,7 @@ import {
 } from '@/components/ui/alert-dialog'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
 import { Label } from '@/components/ui/label'
 import IconPicker from '@/components/ui/icon-picker.vue'
 import { McpCategoriesService, type McpCategory, type CreateMcpCategoryRequest } from '@/services/mcpCategoriesService'
@@ -295,10 +296,9 @@ const handleSortOrderChange = () => {
           </Button>
           <Button
             type="submit"
-            :disabled="!isFormValid"
-            :loading="isSubmitting"
-            :loading-text="t('mcpCategories.modal.saving')"
+            :disabled="!isFormValid || isSubmitting"
           >
+            <Spinner v-if="isSubmitting" class="mr-2" />
             {{ isEditing ? t('mcpCategories.modal.update') : t('mcpCategories.modal.create') }}
           </Button>
         </AlertDialogFooter>

services/frontend/src/components/admin/satellites/CreateTokenModal.vue

@@ -3,6 +3,7 @@ import { ref, computed, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { toast } from 'vue-sonner'
 import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
@@ -274,9 +275,8 @@ const selectedTeamName = computed(() => {
           <Button
             @click="handleCreateToken"
             :disabled="isCreating || (!canCreateGlobal && !canCreateTeam)"
-            :loading="isCreating"
-            :loading-text="t('satellites.pairing.createToken.buttons.creating')"
           >
+            <Spinner v-if="isCreating" class="mr-2" />
             {{ t('satellites.pairing.createToken.buttons.create') }}
           </Button>
         </DialogFooter>

services/frontend/src/components/client-config/CommandActionRenderer.vue

@@ -4,6 +4,7 @@ import type { CommandAction } from '@/services/satelliteConfigService'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
 import { useI18n } from 'vue-i18n'
 
 interface Props {
@@ -50,9 +51,9 @@ async function handleCopy() {
     <div v-if="showCopyButton" class="flex justify-end">
       <Button
         @click="handleCopy"
-        :loading="isCopying"
-        loading-text="Copying..."
+        :disabled="isCopying"
       >
+        <Spinner v-if="isCopying" class="mr-2" />
         {{ t('satelliteConfig.button.copy') }}
       </Button>
     </div>

services/frontend/src/components/client-config/JsonActionRenderer.vue

@@ -4,6 +4,7 @@ import type { JsonAction } from '@/services/satelliteConfigService'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
 import { useI18n } from 'vue-i18n'
 
 interface Props {
@@ -61,9 +62,9 @@ async function handleCopy() {
     <div v-if="showCopyButton" class="flex justify-end">
       <Button
         @click="handleCopy"
-        :loading="isCopying"
-        loading-text="Copying..."
+        :disabled="isCopying"
       >
+        <Spinner v-if="isCopying" class="mr-2" />
         {{ t('satelliteConfig.button.copy') }}
       </Button>
     </div>

services/frontend/src/components/client-config/TextActionRenderer.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import type { TextAction } from '@/services/satelliteConfigService'
 import { Textarea } from '@/components/ui/textarea'
 import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
 import { useI18n } from 'vue-i18n'
 
 interface Props {
@@ -42,9 +43,9 @@ async function handleCopy() {
     <div v-if="showCopyButton" class="flex justify-end">
       <Button
         @click="handleCopy"
-        :loading="isCopying"
-        loading-text="Copying..."
+        :disabled="isCopying"
       >
+        <Spinner v-if="isCopying" class="mr-2" />
         {{ t('satelliteConfig.button.copy') }}
       </Button>
     </div>

services/frontend/src/components/credentials/AddCredentialDialog.vue

@@ -2,6 +2,7 @@
 import { ref, computed, onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
 import { Card } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -392,11 +393,10 @@ onMounted(() => {
             </Button>
             <Button
               type="submit"
-              :disabled="!isFormValid"
-              :loading="isSaving"
-              :loading-text="t('credentials.form.buttons.saving')"
+              :disabled="!isFormValid || isSaving"
               class="min-w-[120px]"
             >
+              <Spinner v-if="isSaving" class="mr-2" />
               {{ t('credentials.form.buttons.save') }}
             </Button>
           </div>

services/frontend/src/components/gateway-config/ClientConfigurationModal.vue

@@ -17,6 +17,7 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
 import { GatewayConfigService, type ClientConfigResponse, type ClientInfo, type ConfigAction } from '@/services/satelliteConfigService'
 import { toast } from 'vue-sonner'
 import LinkActionRenderer from '@/components/client-config/LinkActionRenderer.vue'
@@ -239,10 +240,9 @@ function handleLinkClick(action: { url: string; name?: string }) {
         <Button
           v-if="hasCopyableContent"
           @click="handleCopyAndClose"
-          :loading="isCopying"
-          loading-text="Copying..."
-          :disabled="!copyableContent || isLoading || isLoadingClients"
+          :disabled="isCopying || !copyableContent || isLoading || isLoadingClients"
         >
+          <Spinner v-if="isCopying" class="mr-2" />
           {{ t('satelliteConfig.button.copyAndClose') }}
         </Button>
       </AlertDialogFooter>