1 files changed, 27 insertions, 9 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<ProviderDisplayProps, Provi
             this.props.providerType,
             this.props.injectedProviderName,
         );
-        const displayAddress = isAddressAvailable
-            ? utils.getAddressBeginAndEnd(this.props.userAddress)
-            : isExternallyInjectedProvider
-                ? 'Account locked'
-                : '0x0000...0000';
+        let displayMessage;
+        if (!this._isBlockchainReady()) {
+            displayMessage = 'loading account';
+        } else if (isAddressAvailable) {
+            displayMessage = utils.getAddressBeginAndEnd(this.props.userAddress);
+            // tslint:disable-next-line: prefer-conditional-expression
+        } else if (isExternallyInjectedProvider) {
+            displayMessage = 'Account locked';
+        } else {
+            displayMessage = '0x0000...0000';
+        }
+
         // If the "injected" provider is our fallback public node, then we want to
         // show the "connect a wallet" message instead of the providerName
         const injectedProviderName = isExternallyInjectedProvider
@@ -60,10 +69,14 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
         const hoverActiveNode = (
             <div className="flex right lg-pr0 md-pr2 sm-pr2 p1" style={styles.root}>
                 <div>
-                    <Identicon address={this.props.userAddress} diameter={ROOT_HEIGHT} />
+                    {this._isBlockchainReady() ? (
+                        <Identicon address={this.props.userAddress} diameter={ROOT_HEIGHT} />
+                    ) : (
+                        <CircularProgress size={ROOT_HEIGHT} thickness={2} />
+                    )}
                 </div>
                 <div style={{ marginLeft: 12, paddingTop: 3 }}>
-                    <div style={{ fontSize: 16, color: colors.darkGrey }}>{displayAddress}</div>
+                    <div style={{ fontSize: 16, color: colors.darkGrey }}>{displayMessage}</div>
                 </div>
                 {isProviderMetamask && (
                     <div style={{ marginLeft: 16 }}>
@@ -87,7 +100,9 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
         );
     }
     public renderPopoverContent(hasInjectedProvider: boolean, hasLedgerProvider: boolean): React.ReactNode {
-        if (hasInjectedProvider || hasLedgerProvider) {
+        if (!this._isBlockchainReady()) {
+            return null;
+        } else if (hasInjectedProvider || hasLedgerProvider) {
             return (
                 <ProviderPicker
                     dispatcher={this.props.dispatcher}
@@ -159,4 +174,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
             );
         }
     }
+    private _isBlockchainReady(): boolean {
+        return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain);
+    }
 }