fix(stage-ui, stage-web): oauth loading state

apps/stage-web/src/pages/auth/login.vue

@@ -1,27 +1,34 @@
 <script setup lang="ts">
+import type { OAuthProvider } from '@proj-airi/stage-ui/libs/auth'
+
 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 { onMounted, ref, 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)')
 
-async function handleSignIn(provider: 'google' | 'github') {
+const loading = ref<Record<OAuthProvider, boolean>>({
+  google: false,
+  github: false,
+})
+
+async function handleSignIn(provider: OAuthProvider) {
+  loading.value[provider] = true
   try {
     await signIn(provider)
   }
   catch (error) {
     toast.error(error instanceof Error ? error.message : 'An unknown error occurred')
   }
+  finally {
+    loading.value[provider] = false
+  }
 }
 
 onMounted(() => {
@@ -52,18 +59,18 @@ watch(isDesktop, (val) => {
     <div class="max-w-xs w-full flex flex-col gap-3">
       <Button
         :class="['w-full', 'py-2', 'flex', 'items-center', 'justify-center']"
-        :loading="isLoggingIn"
+        :loading="loading.google"
         @click="handleSignIn('google')"
       >
-        <div class="i-simple-icons-google" />
+        <div v-if="!loading.google" class="i-simple-icons-google" />
         <span>Google</span>
       </Button>
       <Button
         :class="['w-full', 'py-2', 'flex', 'items-center', 'justify-center']"
-        :loading="isLoggingIn"
+        :loading="loading.github"
         @click="handleSignIn('github')"
       >
-        <div class="i-simple-icons-github" />
+        <div v-if="!loading.github" class="i-simple-icons-github" />
         <span>GitHub</span>
       </Button>
     </div>