From 5ae06585f27ad0773291fcae362869b58e62bbd4 Mon Sep 17 00:00:00 2001 From: Zai Shi Date: Sun, 14 Apr 2024 11:13:21 +0200 Subject: [PATCH] added loading indicator, fixed loading buttons --- apps/dev/src/app/ui/page-client.tsx | 15 ++++++ packages/stack/package.json | 1 + packages/stack/src/components-core/button.tsx | 15 ++++-- .../src/components-page/account-settings.tsx | 8 ---- .../src/components/credential-sign-in.tsx | 10 +--- pnpm-lock.yaml | 48 +++++++++++++++++++ 6 files changed, 76 insertions(+), 21 deletions(-) diff --git a/apps/dev/src/app/ui/page-client.tsx b/apps/dev/src/app/ui/page-client.tsx index 21d7d0eaf..86b47a2cd 100644 --- a/apps/dev/src/app/ui/page-client.tsx +++ b/apps/dev/src/app/ui/page-client.tsx @@ -66,6 +66,21 @@ export default function PageClient() { +
+ + + + +
+
diff --git a/packages/stack/package.json b/packages/stack/package.json index 467f0ee34..8ea9709c4 100644 --- a/packages/stack/package.json +++ b/packages/stack/package.json @@ -27,6 +27,7 @@ "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 4631b5d7f..333f93eb6 100644 --- a/packages/stack/src/components-core/button.tsx +++ b/packages/stack/src/components-core/button.tsx @@ -5,6 +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"; function getColors({ propsColor, @@ -106,6 +107,7 @@ const StyledButton = styled.button<{ $activeBgColor: string, $textColor: string, $underline: boolean, + $loading: boolean, }>` border: 0; border-radius: ${BORDER_RADIUS}; @@ -143,6 +145,7 @@ const StyledButton = styled.button<{ } font-family: ${FONT_FAMILY}; text-decoration: ${props => props.$underline ? 'underline' : 'none'}; + position: relative; `; const Button = React.forwardRef( @@ -150,7 +153,6 @@ const Button = React.forwardRef( variant='primary', size='md', loading=false, - disabled=false, ...props }, ref) => { const { colors, colorMode } = useDesign(); @@ -168,12 +170,17 @@ const Button = React.forwardRef( $bgColor={buttonColors.bgColor} $hoverBgColor={buttonColors.hoverBgColor} $activeBgColor={buttonColors.activeBgColor} - $textColor={buttonColors.textColor} + $textColor={buttonColors.textColor} $underline={variant === 'link'} - disabled={disabled || loading} + $loading={loading} {...props} > - {props.children} +
+ +
+
+ {props.children} +
); } diff --git a/packages/stack/src/components-page/account-settings.tsx b/packages/stack/src/components-page/account-settings.tsx index 265386c05..b8741e5c1 100644 --- a/packages/stack/src/components-page/account-settings.tsx +++ b/packages/stack/src/components-page/account-settings.tsx @@ -14,7 +14,6 @@ function SettingSection(props: { desc: string, buttonText?: string, buttonDisabled?: boolean, - buttonLoading?: boolean, onButtonClick?: React.ComponentProps["onClick"], buttonVariant?: 'primary' | 'secondary', children?: React.ReactNode, @@ -35,7 +34,6 @@ function SettingSection(props: { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 63446db2e..e07612b43 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -231,6 +231,9 @@ importers: react-icons: specifier: ^5.0.1 version: 5.0.1(react@18.2.0) + react-spinners-kit: + specifier: ^1.9.1 + version: 1.9.1(styled-components@6.1.8) server-only: specifier: ^0.0.1 version: 0.0.1 @@ -12286,6 +12289,11 @@ packages: find-up: 3.0.0 dev: false + /polished@1.9.3: + resolution: {integrity: sha512-4NmSD7fMFlM8roNxs7YXPv7UFRbYzb0gufR5zBxJLRzY54+zFsavxBo6zsQzP9ep6Hh3pC2pTyrpSTBEaB6IkQ==} + deprecated: polished@2.X is no longer supported. Please upgrade to @latest for important bug and security fixes. + dev: false + /postcss-calc@8.2.4(postcss@8.4.35): resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==} peerDependencies: @@ -13024,6 +13032,18 @@ packages: - vue-template-compiler dev: false + /react-dom@16.14.0(react@16.14.0): + resolution: {integrity: sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==} + peerDependencies: + react: ^16.14.0 + dependencies: + loose-envify: 1.4.0 + object-assign: 4.1.1 + prop-types: 15.8.1 + react: 16.14.0 + scheduler: 0.19.1 + dev: false + /react-dom@18.2.0(react@18.2.0): resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: @@ -13243,6 +13263,18 @@ packages: tiny-warning: 1.0.3 dev: false + /react-spinners-kit@1.9.1(styled-components@6.1.8): + resolution: {integrity: sha512-QtAvSD7b1WkThY3pRKu6Sr+DZafnEufoOvug/uHprkKyZK6bg6TG5LC3Sy3JaRh6A/HACIcTNEWG+Ls0YDoSHg==} + peerDependencies: + styled-components: '>=2.0.0' + dependencies: + polished: 1.9.3 + prop-types: 15.8.1 + react: 16.14.0 + react-dom: 16.14.0(react@16.14.0) + styled-components: 6.1.8(react-dom@18.2.0)(react@18.2.0) + dev: false + /react-style-singleton@2.2.1(@types/react@18.2.66)(react@18.2.0): resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==} engines: {node: '>=10'} @@ -13274,6 +13306,15 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /react@16.14.0: + resolution: {integrity: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==} + engines: {node: '>=0.10.0'} + dependencies: + loose-envify: 1.4.0 + object-assign: 4.1.1 + prop-types: 15.8.1 + dev: false + /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} @@ -13733,6 +13774,13 @@ packages: resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==} dev: false + /scheduler@0.19.1: + resolution: {integrity: sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==} + dependencies: + loose-envify: 1.4.0 + object-assign: 4.1.1 + dev: false + /scheduler@0.23.0: resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} dependencies: