From c9baf0c4dfaaa4debaacaf8ed1fd056e93b5d98d Mon Sep 17 00:00:00 2001
From: Julian Schramm <hi@julian.center>
Date: Wed, 29 Oct 2025 18:27:10 +0100
Subject: [PATCH 1/2] use shadcn-vue spinner component

---
 resources/js/components/TwoFactorSetupModal.vue |  5 +++--
 resources/js/components/ui/spinner/Spinner.vue  | 17 +++++++++++++++++
 resources/js/components/ui/spinner/index.ts     |  1 +
 resources/js/pages/auth/ConfirmPassword.vue     |  7 ++-----
 resources/js/pages/auth/ForgotPassword.vue      |  7 ++-----
 resources/js/pages/auth/Login.vue               |  7 ++-----
 resources/js/pages/auth/Register.vue            |  7 ++-----
 resources/js/pages/auth/ResetPassword.vue       |  7 ++-----
 resources/js/pages/auth/VerifyEmail.vue         |  4 ++--
 9 files changed, 33 insertions(+), 29 deletions(-)
 create mode 100644 resources/js/components/ui/spinner/Spinner.vue
 create mode 100644 resources/js/components/ui/spinner/index.ts

diff --git a/resources/js/components/TwoFactorSetupModal.vue b/resources/js/components/TwoFactorSetupModal.vue
index 1f9ca86a..73d77115 100644
--- a/resources/js/components/TwoFactorSetupModal.vue
+++ b/resources/js/components/TwoFactorSetupModal.vue
@@ -2,6 +2,7 @@
 import AlertError from '@/components/AlertError.vue';
 import InputError from '@/components/InputError.vue';
 import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
 import {
     Dialog,
     DialogContent,
@@ -163,7 +164,7 @@ watch(
                                     v-if="!qrCodeSvg"
                                     class="absolute inset-0 z-10 flex aspect-square h-auto w-full animate-pulse items-center justify-center bg-background"
                                 >
-                                    <Loader2 class="size-6 animate-spin" />
+                                    <Spinner class="size-6" />
                                 </div>
                                 <div
                                     v-else
@@ -204,7 +205,7 @@ watch(
                                     v-if="!manualSetupKey"
                                     class="flex h-full w-full items-center justify-center bg-muted p-3"
                                 >
-                                    <Loader2 class="size-4 animate-spin" />
+                                    <Spinner />
                                 </div>
                                 <template v-else>
                                     <input
diff --git a/resources/js/components/ui/spinner/Spinner.vue b/resources/js/components/ui/spinner/Spinner.vue
new file mode 100644
index 00000000..57cd1a96
--- /dev/null
+++ b/resources/js/components/ui/spinner/Spinner.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { Loader2Icon } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Loader2Icon
+    role="status"
+    aria-label="Loading"
+    :class="cn('size-4 animate-spin', props.class)"
+  />
+</template>
diff --git a/resources/js/components/ui/spinner/index.ts b/resources/js/components/ui/spinner/index.ts
new file mode 100644
index 00000000..aa630075
--- /dev/null
+++ b/resources/js/components/ui/spinner/index.ts
@@ -0,0 +1 @@
+export { default as Spinner } from "./Spinner.vue"
diff --git a/resources/js/pages/auth/ConfirmPassword.vue b/resources/js/pages/auth/ConfirmPassword.vue
index 77c59044..fbdfdc97 100644
--- a/resources/js/pages/auth/ConfirmPassword.vue
+++ b/resources/js/pages/auth/ConfirmPassword.vue
@@ -3,10 +3,10 @@ import InputError from '@/components/InputError.vue';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { store } from '@/routes/password/confirm';
 import { Form, Head } from '@inertiajs/vue3';
-import { LoaderCircle } from 'lucide-vue-next';
 </script>
 
 <template>
@@ -43,10 +43,7 @@ import { LoaderCircle } from 'lucide-vue-next';
                         :disabled="processing"
                         data-test="confirm-password-button"
                     >
-                        <LoaderCircle
-                            v-if="processing"
-                            class="h-4 w-4 animate-spin"
-                        />
+                        <Spinner v-if="processing" />
                         Confirm Password
                     </Button>
                 </div>
diff --git a/resources/js/pages/auth/ForgotPassword.vue b/resources/js/pages/auth/ForgotPassword.vue
index 60339f45..b5652921 100644
--- a/resources/js/pages/auth/ForgotPassword.vue
+++ b/resources/js/pages/auth/ForgotPassword.vue
@@ -4,11 +4,11 @@ import TextLink from '@/components/TextLink.vue';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { login } from '@/routes';
 import { email } from '@/routes/password';
 import { Form, Head } from '@inertiajs/vue3';
-import { LoaderCircle } from 'lucide-vue-next';
 
 defineProps<{
     status?: string;
@@ -50,10 +50,7 @@ defineProps<{
                         :disabled="processing"
                         data-test="email-password-reset-link-button"
                     >
-                        <LoaderCircle
-                            v-if="processing"
-                            class="h-4 w-4 animate-spin"
-                        />
+                        <Spinner v-if="processing" />
                         Email password reset link
                     </Button>
                 </div>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index efba0def..781bff64 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -5,12 +5,12 @@ import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
 import AuthBase from '@/layouts/AuthLayout.vue';
 import { register } from '@/routes';
 import { store } from '@/routes/login';
 import { request } from '@/routes/password';
 import { Form, Head } from '@inertiajs/vue3';
-import { LoaderCircle } from 'lucide-vue-next';
 
 defineProps<{
     status?: string;
@@ -93,10 +93,7 @@ defineProps<{
                     :disabled="processing"
                     data-test="login-button"
                 >
-                    <LoaderCircle
-                        v-if="processing"
-                        class="h-4 w-4 animate-spin"
-                    />
+                    <Spinner v-if="processing" />
                     Log in
                 </Button>
             </div>
diff --git a/resources/js/pages/auth/Register.vue b/resources/js/pages/auth/Register.vue
index e6ad7c27..62b23be3 100644
--- a/resources/js/pages/auth/Register.vue
+++ b/resources/js/pages/auth/Register.vue
@@ -4,11 +4,11 @@ import TextLink from '@/components/TextLink.vue';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
 import AuthBase from '@/layouts/AuthLayout.vue';
 import { login } from '@/routes';
 import { store } from '@/routes/register';
 import { Form, Head } from '@inertiajs/vue3';
-import { LoaderCircle } from 'lucide-vue-next';
 </script>
 
 <template>
@@ -89,10 +89,7 @@ import { LoaderCircle } from 'lucide-vue-next';
                     :disabled="processing"
                     data-test="register-user-button"
                 >
-                    <LoaderCircle
-                        v-if="processing"
-                        class="h-4 w-4 animate-spin"
-                    />
+                    <Spinner v-if="processing" />
                     Create account
                 </Button>
             </div>
diff --git a/resources/js/pages/auth/ResetPassword.vue b/resources/js/pages/auth/ResetPassword.vue
index 71a53bea..ffdec366 100644
--- a/resources/js/pages/auth/ResetPassword.vue
+++ b/resources/js/pages/auth/ResetPassword.vue
@@ -3,10 +3,10 @@ import InputError from '@/components/InputError.vue';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { update } from '@/routes/password';
 import { Form, Head } from '@inertiajs/vue3';
-import { LoaderCircle } from 'lucide-vue-next';
 import { ref } from 'vue';
 
 const props = defineProps<{
@@ -80,10 +80,7 @@ const inputEmail = ref(props.email);
                     :disabled="processing"
                     data-test="reset-password-button"
                 >
-                    <LoaderCircle
-                        v-if="processing"
-                        class="h-4 w-4 animate-spin"
-                    />
+                    <Spinner v-if="processing" />
                     Reset password
                 </Button>
             </div>
diff --git a/resources/js/pages/auth/VerifyEmail.vue b/resources/js/pages/auth/VerifyEmail.vue
index 7e18399a..45d5dcaa 100644
--- a/resources/js/pages/auth/VerifyEmail.vue
+++ b/resources/js/pages/auth/VerifyEmail.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import TextLink from '@/components/TextLink.vue';
 import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { logout } from '@/routes';
 import { send } from '@/routes/verification';
 import { Form, Head } from '@inertiajs/vue3';
-import { LoaderCircle } from 'lucide-vue-next';
 
 defineProps<{
     status?: string;
@@ -33,7 +33,7 @@ defineProps<{
             v-slot="{ processing }"
         >
             <Button :disabled="processing" variant="secondary">
-                <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
+                <Spinner v-if="processing" />
                 Resend verification email
             </Button>
 

From fa5b44fbf82b608f40bcb022a6d3f3b6f87ea21f Mon Sep 17 00:00:00 2001
From: Julian Schramm <hi@julian.center>
Date: Wed, 29 Oct 2025 21:28:44 +0100
Subject: [PATCH 2/2] remove unused import

---
 resources/js/components/TwoFactorSetupModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/TwoFactorSetupModal.vue b/resources/js/components/TwoFactorSetupModal.vue
index 73d77115..fd8f3d54 100644
--- a/resources/js/components/TwoFactorSetupModal.vue
+++ b/resources/js/components/TwoFactorSetupModal.vue
@@ -19,7 +19,7 @@ import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import { confirm } from '@/routes/two-factor';
 import { Form } from '@inertiajs/vue3';
 import { useClipboard } from '@vueuse/core';
-import { Check, Copy, Loader2, ScanLine } from 'lucide-vue-next';
+import { Check, Copy, ScanLine } from 'lucide-vue-next';
 import { computed, nextTick, ref, watch } from 'vue';
 
 interface Props {