CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-04 21:04:37 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

removed spinner dependency

Browse Source
This commit is contained in:
Zai Shi 2024-04-14 12:52:57 +02:00
parent a21b2486b1
commit 4234a55b80
3 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/stack/package.json
View File

@ -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"

4
packages/stack/src/components-core/button.tsx
View File

@ -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}

20
packages/stack/src/components-core/loading-indicator.tsx Normal file
View File

@ -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;