diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-07-21 00:16:55 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-07-21 00:16:55 +0800 |
commit | f27084ced46d88164b526ea5f281637ca87d0583 (patch) | |
tree | d0a6c9741e1c076c9705352bf749ddae17e9b0e2 /packages/website/ts | |
parent | cdcf624e9e6fe671611b239f903c2f2cb3097e7c (diff) | |
download | dexon-0x-contracts-f27084ced46d88164b526ea5f281637ca87d0583.tar dexon-0x-contracts-f27084ced46d88164b526ea5f281637ca87d0583.tar.gz dexon-0x-contracts-f27084ced46d88164b526ea5f281637ca87d0583.tar.bz2 dexon-0x-contracts-f27084ced46d88164b526ea5f281637ca87d0583.tar.lz dexon-0x-contracts-f27084ced46d88164b526ea5f281637ca87d0583.tar.xz dexon-0x-contracts-f27084ced46d88164b526ea5f281637ca87d0583.tar.zst dexon-0x-contracts-f27084ced46d88164b526ea5f281637ca87d0583.zip |
Add loading state
Diffstat (limited to 'packages/website/ts')
3 files changed, 4 insertions, 3 deletions
diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index 7e8628e64..4a9c99ca7 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -6,5 +6,5 @@ export interface AllowanceStateToggleProps {} const flip = () => Math.random() < 0.5; export const AllowanceStateToggle: React.StatelessComponent<AllowanceStateToggleProps> = () => ( - <AllowanceStateView allowanceState={flip() ? 'locked' : 'unlocked'} /> + <AllowanceStateView allowanceState={flip() ? 'locked' : 'loading'} /> ); diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx index 55ad3a889..fce06c664 100644 --- a/packages/website/ts/components/ui/allowance_state_view.tsx +++ b/packages/website/ts/components/ui/allowance_state_view.tsx @@ -1,4 +1,5 @@ import { colors } from '@0xproject/react-shared'; +import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import { styled } from 'ts/style/theme'; @@ -15,7 +16,7 @@ export const AllowanceStateView: React.StatelessComponent<AllowanceStateViewProp case 'unlocked': return renderCheck(); case 'loading': - return <div>'...'</div>; + return <CircularProgress size={15} thickness={2} />; default: return null; } diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 84c091b5c..f5e054793 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -398,7 +398,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { // if we don't have a toggle, we still want some space to the right of the "wrap" button so that it aligns with // the "unwrap" button in the row below const toggle = ( - <Container width={NO_ALLOWANCE_TOGGLE_SPACE_WIDTH}> + <Container className="flex justify-center" width={NO_ALLOWANCE_TOGGLE_SPACE_WIDTH}> {shouldShowToggle && this._renderAllowanceToggle(config.allowanceToggleConfig)} </Container> ); |