From bee26daf0c2497a11dfe944d355c4958329d1f50 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 30 May 2018 15:20:44 -0700 Subject: Add loading state to ProviderDisplay --- .../ts/components/top_bar/provider_display.tsx | 36 ++++++++++++++++------ packages/website/ts/components/top_bar/top_bar.tsx | 25 ++++++++------- 2 files changed, 39 insertions(+), 22 deletions(-) diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 679ec07dc..8a337119a 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -1,5 +1,6 @@ import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; +import CircularProgress from 'material-ui/CircularProgress'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; @@ -23,7 +24,8 @@ export interface ProviderDisplayProps { injectedProviderName: string; providerType: ProviderType; onToggleLedgerDialog: () => void; - blockchain: Blockchain; + blockchain?: Blockchain; + blockchainIsLoaded: boolean; } interface ProviderDisplayState {} @@ -44,11 +46,18 @@ export class ProviderDisplay extends React.Component
- + {this._isBlockchainReady() ? ( + + ) : ( + + )}
-
{displayAddress}
+
{displayMessage}
{isProviderMetamask && (
@@ -87,7 +100,9 @@ export class ProviderDisplay extends React.Component {
)} - {this.props.blockchainIsLoaded && ( -
- -
- )} +
+ +
-- cgit v1.2.3