From d49e3e81a49e87d05102d99e66a848a833c66917 Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Sun, 23 Feb 2025 15:30:17 +0800
Subject: [PATCH] fix: loading and spinner style fixed and improved (#5588)

---
 .../src/components/spinner/loading.vue        |  2 +-
 .../src/components/loading/loading.vue        | 32 +++++++++++++++----
 .../src/components/loading/spinner.vue        | 24 +++++++++++---
 3 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
index 79dbda1a..0e1aa810 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
@@ -88,7 +88,7 @@ function onTransitionEnd() {
       </span>
     </slot>
 
-    <div v-if="text" class="mt-4 text-xs">{{ text }}</div>
+    <div v-if="text" class="text-primary mt-4 text-xs">{{ text }}</div>
     <slot></slot>
   </div>
 </template>
diff --git a/packages/effects/common-ui/src/components/loading/loading.vue b/packages/effects/common-ui/src/components/loading/loading.vue
index 6c19a12f..faf49e60 100644
--- a/packages/effects/common-ui/src/components/loading/loading.vue
+++ b/packages/effects/common-ui/src/components/loading/loading.vue
@@ -1,16 +1,36 @@
 <script lang="ts" setup>
 import { VbenLoading } from '@vben-core/shadcn-ui';
+import { cn } from '@vben-core/shared/utils';
+
+interface LoadingProps {
+  class?: string;
+  /**
+   * @zh_CN 最小加载时间
+   * @en_US Minimum loading time
+   */
+  minLoadingTime?: number;
+
+  /**
+   * @zh_CN loading状态开启
+   */
+  spinning?: boolean;
+  /**
+   * @zh_CN 文字
+   */
+  text?: string;
+}
 
 defineOptions({ name: 'Loading' });
-defineProps<{
-  spinning: boolean;
-  text?: string;
-}>();
+const props = defineProps<LoadingProps>();
 </script>
 <template>
-  <div class="relative min-h-20">
+  <div :class="cn('relative min-h-20', props.class)">
     <slot></slot>
-    <VbenLoading :spinning="spinning" :text="text">
+    <VbenLoading
+      :min-loading-time="props.minLoadingTime"
+      :spinning="props.spinning"
+      :text="props.text"
+    >
       <template v-if="$slots.icon" #icon>
         <slot name="icon"></slot>
       </template>
diff --git a/packages/effects/common-ui/src/components/loading/spinner.vue b/packages/effects/common-ui/src/components/loading/spinner.vue
index e4a22cd7..caee2bbc 100644
--- a/packages/effects/common-ui/src/components/loading/spinner.vue
+++ b/packages/effects/common-ui/src/components/loading/spinner.vue
@@ -1,14 +1,28 @@
 <script lang="ts" setup>
 import { VbenSpinner } from '@vben-core/shadcn-ui';
+import { cn } from '@vben-core/shared/utils';
 
+interface SpinnerProps {
+  class?: string;
+  /**
+   * @zh_CN 最小加载时间
+   * @en_US Minimum loading time
+   */
+  minLoadingTime?: number;
+  /**
+   * @zh_CN loading状态开启
+   */
+  spinning?: boolean;
+}
 defineOptions({ name: 'Spinner' });
-defineProps({
-  spinning: Boolean,
-});
+const props = defineProps<SpinnerProps>();
 </script>
 <template>
-  <div class="relative min-h-20">
+  <div :class="cn('relative min-h-20', props.class)">
     <slot></slot>
-    <VbenSpinner :spinning="spinning" />
+    <VbenSpinner
+      :min-loading-time="props.minLoadingTime"
+      :spinning="props.spinning"
+    />
   </div>
 </template>