From 50ced796ca4c9fd4f4b0f9bbc197f30d711e657e Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Sun, 12 Jan 2025 15:33:11 +0800
Subject: [PATCH] fix: animation paused more safely

---
 .../shadcn-ui/src/components/spinner/spinner.vue   | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
index d39baf48568..58eab2ebde9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
@@ -73,13 +73,23 @@ function onTransitionEnd() {
     @transitionend="onTransitionEnd"
   >
     <div
-      :class="{ loader: renderSpinner }"
-      class="before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:content-['']"
+      :class="{ paused: !renderSpinner }"
+      class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:content-['']"
     ></div>
   </div>
 </template>
 
 <style scoped>
+.paused {
+  &::before {
+    animation-play-state: paused !important;
+  }
+
+  &::after {
+    animation-play-state: paused !important;
+  }
+}
+
 .loader {
   &::before {
     animation: loader-shadow-ani 0.5s linear infinite;