Add loading state

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'} />
 );

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

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