From f8b6300e2610926a54eae6621cff54110789bbd6 Mon Sep 17 00:00:00 2001
From: RainbowBird <git@luoling.moe>
Date: Wed, 14 Jan 2026 14:11:35 +0800
Subject: [PATCH] feat(stage-ui, stage-web): add loading state for authing

---
 apps/stage-web/src/pages/auth/login.vue          | 16 ++++++++++++++--
 .../stage-ui/src/components/auth/LoginDrawer.vue | 14 ++++++++++++--
 packages/stage-ui/src/libs/auth.ts               | 15 +++++++++++----
 packages/stage-ui/src/stores/auth.ts             |  2 ++
 4 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/apps/stage-web/src/pages/auth/login.vue b/apps/stage-web/src/pages/auth/login.vue
index 82ad9ae75..8bf69b67c 100644
--- a/apps/stage-web/src/pages/auth/login.vue
+++ b/apps/stage-web/src/pages/auth/login.vue
@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import { LoginDrawer } from '@proj-airi/stage-ui/components/auth'
 import { fetchSession, signIn } from '@proj-airi/stage-ui/libs/auth'
+import { useAuthStore } from '@proj-airi/stage-ui/stores/auth'
 import { Button } from '@proj-airi/ui'
 import { useMediaQuery } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
 import { onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
 const router = useRouter()
+const authStore = useAuthStore()
+const { isLoggingIn } = storeToRefs(authStore)
 
 const isDesktop = useMediaQuery('(min-width: 768px)')
 
@@ -46,11 +50,19 @@ watch(isDesktop, (val) => {
       Sign in to AIRI Stage
     </div>
     <div class="max-w-xs w-full flex flex-col gap-3">
-      <Button :class="['w-full', 'py-2', 'flex', 'items-center', 'justify-center']" @click="handleSignIn('google')">
+      <Button
+        :class="['w-full', 'py-2', 'flex', 'items-center', 'justify-center']"
+        :loading="isLoggingIn"
+        @click="handleSignIn('google')"
+      >
         <div class="i-simple-icons-google" />
         <span>Google</span>
       </Button>
-      <Button :class="['w-full', 'py-2', 'flex', 'items-center', 'justify-center']" @click="handleSignIn('github')">
+      <Button
+        :class="['w-full', 'py-2', 'flex', 'items-center', 'justify-center']"
+        :loading="isLoggingIn"
+        @click="handleSignIn('github')"
+      >
         <div class="i-simple-icons-github" />
         <span>GitHub</span>
       </Button>
diff --git a/packages/stage-ui/src/components/auth/LoginDrawer.vue b/packages/stage-ui/src/components/auth/LoginDrawer.vue
index 0c206339b..5722f5046 100644
--- a/packages/stage-ui/src/components/auth/LoginDrawer.vue
+++ b/packages/stage-ui/src/components/auth/LoginDrawer.vue
@@ -5,7 +5,9 @@ import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot }
 import { toast } from 'vue-sonner'
 
 import { signIn } from '../../libs/auth'
+import { useAuthStore } from '../../stores/auth'
 
+const authStore = useAuthStore()
 const open = defineModel<boolean>('open', { required: true })
 
 const screenSafeArea = useScreenSafeArea()
@@ -35,11 +37,19 @@ async function handleSignIn(provider: 'google' | 'github') {
             Sign in
           </div>
           <div class="flex flex-col gap-4">
-            <Button :class="['w-full', 'py-4', 'flex', 'items-center', 'justify-center', 'gap-3', 'text-lg', 'rounded-2xl']" @click="handleSignIn('google')">
+            <Button
+              :class="['w-full', 'py-4', 'flex', 'items-center', 'justify-center', 'gap-3', 'text-lg', 'rounded-2xl']"
+              :loading="authStore.isLoggingIn"
+              @click="handleSignIn('google')"
+            >
               <div class="i-simple-icons-google text-xl" />
               <span>Sign in with Google</span>
             </Button>
-            <Button :class="['w-full', 'py-4', 'flex', 'items-center', 'justify-center', 'gap-3', 'text-lg', 'rounded-2xl']" @click="handleSignIn('github')">
+            <Button
+              :class="['w-full', 'py-4', 'flex', 'items-center', 'justify-center', 'gap-3', 'text-lg', 'rounded-2xl']"
+              :loading="authStore.isLoggingIn"
+              @click="handleSignIn('github')"
+            >
               <div class="i-simple-icons-github text-xl" />
               <span>Sign in with GitHub</span>
             </Button>
diff --git a/packages/stage-ui/src/libs/auth.ts b/packages/stage-ui/src/libs/auth.ts
index 208b6002b..8f5746483 100644
--- a/packages/stage-ui/src/libs/auth.ts
+++ b/packages/stage-ui/src/libs/auth.ts
@@ -35,8 +35,15 @@ export async function signOut() {
 }
 
 export async function signIn(provider: 'google' | 'github') {
-  return await authClient.signIn.social({
-    provider,
-    callbackURL: window.location.origin,
-  })
+  const authStore = useAuthStore()
+  authStore.isLoggingIn = true
+  try {
+    return await authClient.signIn.social({
+      provider,
+      callbackURL: window.location.origin,
+    })
+  }
+  finally {
+    authStore.isLoggingIn = false
+  }
 }
diff --git a/packages/stage-ui/src/stores/auth.ts b/packages/stage-ui/src/stores/auth.ts
index 8e6cc7dc6..1db1d7ced 100644
--- a/packages/stage-ui/src/stores/auth.ts
+++ b/packages/stage-ui/src/stores/auth.ts
@@ -9,6 +9,7 @@ export const useAuthStore = defineStore('auth', () => {
   const isAuthenticated = computed(() => !!user.value && !!session.value)
 
   const isLoginOpen = ref(false)
+  const isLoggingIn = ref(false)
 
   // TODO: include fetchSession here for pulling and updating better-auth session with initialize(...) action
 
@@ -17,5 +18,6 @@ export const useAuthStore = defineStore('auth', () => {
     session,
     isAuthenticated,
     isLoginOpen,
+    isLoggingIn,
   }
 })