From 4234a55b8003e2369f1c01e768dc5b920a8a813d Mon Sep 17 00:00:00 2001
From: Zai Shi <zaishi00@outlook.com>
Date: Sun, 14 Apr 2024 12:52:57 +0200
Subject: [PATCH] removed spinner dependency

---
 packages/stack/package.json                   |  1 -
 packages/stack/src/components-core/button.tsx |  4 ++--
 .../src/components-core/loading-indicator.tsx | 20 +++++++++++++++++++
 3 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 packages/stack/src/components-core/loading-indicator.tsx

diff --git a/packages/stack/package.json b/packages/stack/package.json
index 8ea9709c4..467f0ee34 100644
--- a/packages/stack/package.json
+++ b/packages/stack/package.json
@@ -27,7 +27,6 @@
     "next-themes": "^0.2.1",
     "oauth4webapi": "^2.10.3",
     "react-icons": "^5.0.1",
-    "react-spinners-kit": "^1.9.1",
     "server-only": "^0.0.1",
     "styled-components": "^6.1.8",
     "tailwindcss-scoped-preflight": "^2.1.0"
diff --git a/packages/stack/src/components-core/button.tsx b/packages/stack/src/components-core/button.tsx
index 333f93eb6..71f1dc72d 100644
--- a/packages/stack/src/components-core/button.tsx
+++ b/packages/stack/src/components-core/button.tsx
@@ -5,7 +5,7 @@ import { useDesign } from "../providers/design-provider";
 import Color from 'color';
 import styled from 'styled-components';
 import { BORDER_RADIUS, FONT_FAMILY, FONT_SIZES, LINK_COLORS } from "../utils/constants";
-import { PulseSpinner } from "react-spinners-kit";
+import LoadingIndicator from "./loading-indicator";
 
 function getColors({
   propsColor, 
@@ -176,7 +176,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', visibility: loading ? 'visible' : 'hidden' }}>
-          <PulseSpinner size={20} color={buttonColors.textColor} />
+          <LoadingIndicator color={buttonColors.textColor}/>
         </div>
         <div style={{ visibility: loading ? 'hidden' : 'visible' }}>
           {props.children}
diff --git a/packages/stack/src/components-core/loading-indicator.tsx b/packages/stack/src/components-core/loading-indicator.tsx
new file mode 100644
index 000000000..eafddf2f6
--- /dev/null
+++ b/packages/stack/src/components-core/loading-indicator.tsx
@@ -0,0 +1,20 @@
+import styled, { keyframes } from 'styled-components';
+
+const l7 = keyframes`
+  33% { background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%; }
+  50% { background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%; }
+  66% { background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%; }
+`;
+
+const LoadingIndicator = styled.div<{ color: string, size?: number }>`
+  width: ${props => props.size || 36}px;
+  aspect-ratio: 4;
+  --_g: no-repeat radial-gradient(circle closest-side, ${props => props.color} 90%, #0000);
+  background: 
+    var(--_g) 0% 50%, 
+    var(--_g) 50% 50%, 
+    var(--_g) 100% 50%;
+  background-size: calc(100%/3) 100%;
+  animation: ${l7} 1s infinite linear;
+`;
+export default LoadingIndicator;
\ No newline at end of file