fix: expose logout progress

apps/web/src/pages/AdminShell.stories.js

@@ -8,6 +8,14 @@ export default {
 
 export const Navigation = { args: { routed: false } };
 
+export const LogoutControl = {
+  args: { routed: false },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole('button', { name: 'Sign out' })).toHaveAttribute('aria-busy', 'false');
+  },
+};
+
 export const KeyboardSkipLink = {
   args: { routed: false },
   play: async ({ canvasElement }) => {

apps/web/src/pages/AdminShell.vue

@@ -1,14 +1,21 @@
 <script setup>
 import { RouterView } from 'vue-router';
+import { ref } from 'vue';
 
 import { useAuth } from '@/composables/useAuth.js';
 
 defineProps({ routed: { type: Boolean, default: true } });
 const { principal, signOut } = useAuth();
+const isLoggingOut = ref(false);
 
 async function logout() {
-  await signOut();
-  window.location.href = '/login';
+  isLoggingOut.value = true;
+  try {
+    await signOut();
+    window.location.href = '/login';
+  } finally {
+    isLoggingOut.value = false;
+  }
 }
 </script>
 
@@ -29,7 +36,7 @@ async function logout() {
       </nav>
       <div class="admin-sidebar__footer">
         <span>{{ principal?.email }}</span>
-        <button class="button button--secondary" type="button" @click="logout">Sign out</button>
+        <button class="button button--secondary" type="button" :disabled="isLoggingOut" :aria-busy="isLoggingOut" @click="logout">{{ isLoggingOut ? 'Signing out…' : 'Sign out' }}</button>
       </div>
     </aside>
     <section id="admin-content" class="admin-shell__content" tabindex="-1"><RouterView v-if="routed" /></section>