From 3205325586a5a600109b03fb31a2558bb856df82 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Mon, 30 Dec 2024 19:56:28 +0330
Subject: [PATCH] Add loading indicator for button

---
 frontend/components/ui/Button.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/components/ui/Button.vue b/frontend/components/ui/Button.vue
index 46ea375..4624e10 100644
--- a/frontend/components/ui/Button.vue
+++ b/frontend/components/ui/Button.vue
@@ -5,6 +5,7 @@ type Props = {
     size?: "xl" | "lg" | "md";
     startIcon?: string;
     endIcon?: string;
+    loading?: boolean;
 };
 
 // props
@@ -35,8 +36,9 @@ const classes = computed(() => {
 
 <template>
     <button :class="classes">
-        <Icon v-if="startIcon" :name="startIcon" />
-        <slot />
-        <Icon v-if="endIcon" :name="endIcon" />
+        <Icon v-if="!loading && startIcon" :name="startIcon" />
+        <slot v-if="!loading" />
+        <Icon v-if="!loading && endIcon" :name="endIcon" />
+        <Icon v-if="loading" name="svg-spinners:3-dots-fade" class="my-0.5" />
     </button>
 </template>