Add loading component

3 files changed, 77 insertions, 50 deletions

diff --git a/packages/website/ts/components/portal/loading.tsx b/packages/website/ts/components/portal/loading.tsx
new file mode 100644
index 000000000..d804dd1b8
--- /dev/null
+++ b/packages/website/ts/components/portal/loading.tsx
@@ -0,0 +1,21 @@
+import CircularProgress from 'material-ui/CircularProgress';
+import * as React from 'react';
+
+const CIRCULAR_PROGRESS_SIZE = 40;
+const CIRCULAR_PROGRESS_THICKNESS = 5;
+
+export interface LoadingProps {
+    isLoading: boolean;
+    content: React.ReactNode;
+}
+export const Loading = (props: LoadingProps) => {
+    if (props.isLoading) {
+        return (
+            <div className="center">
+                <CircularProgress size={CIRCULAR_PROGRESS_SIZE} thickness={CIRCULAR_PROGRESS_THICKNESS} />
+            </div>
+        );
+    } else {
+        return <div>{props.content}</div>;
+    }
+};
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 81afe57e5..bcb8e60ef 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,7 +1,6 @@
 import { colors, Styles } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
-import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom';
@@ -13,6 +12,7 @@ import { PortalDisclaimerDialog } from 'ts/components/dialogs/portal_disclaimer_
 import { EthWrappers } from 'ts/components/eth_wrappers';
 import { AssetPicker } from 'ts/components/generate_order/asset_picker';
 import { BackButton } from 'ts/components/portal/back_button';
+import { Loading } from 'ts/components/portal/loading';
 import { Menu } from 'ts/components/portal/menu';
 import { Section } from 'ts/components/portal/section';
 import { TextHeader } from 'ts/components/portal/text_header';
@@ -283,7 +283,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         );
     }
     private _renderAccountManagement(): React.ReactNode {
-        return this.props.blockchainIsLoaded ? (
+        return (
             <Switch>
                 <Route path={`${WebsitePaths.Portal}/weth`} render={this._renderEthWrapper.bind(this)} />
                 <Route path={`${WebsitePaths.Portal}/account`} render={this._renderTokenBalances.bind(this)} />
@@ -291,18 +291,6 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 <Route path={`${WebsitePaths.Portal}/direct`} render={this._renderTradeDirect.bind(this)} />
                 <Route render={this._renderNotFoundMessage.bind(this)} />
             </Switch>
-        ) : (
-            // TODO: consolidate this loading component with the one in relayer_index
-            <div className="pt4 sm-px2 sm-pt2 sm-m1" style={{ height: 500 }}>
-                <div
-                    className="relative sm-px2 sm-pt2 sm-m1"
-                    style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
-                >
-                    <div className="center pb2">
-                        <CircularProgress size={40} thickness={5} />
-                    </div>
-                </div>
-            </div>
         );
     }
     private _renderEthWrapper(): React.ReactNode {
@@ -310,14 +298,19 @@ export class Portal extends React.Component<PortalProps, PortalState> {
             <Section
                 header={<TextHeader labelText="Wrapped ETH" />}
                 body={
-                    <EthWrappers
-                        networkId={this.props.networkId}
-                        blockchain={this._blockchain}
-                        dispatcher={this.props.dispatcher}
-                        tokenByAddress={this.props.tokenByAddress}
-                        userAddress={this.props.userAddress}
-                        userEtherBalanceInWei={this.props.userEtherBalanceInWei}
-                        lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                    <Loading
+                        isLoading={!this.props.blockchainIsLoaded}
+                        content={
+                            <EthWrappers
+                                networkId={this.props.networkId}
+                                blockchain={this._blockchain}
+                                dispatcher={this.props.dispatcher}
+                                tokenByAddress={this.props.tokenByAddress}
+                                userAddress={this.props.userAddress}
+                                userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+                                lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                            />
+                        }
                     />
                 }
             />
@@ -328,10 +321,15 @@ export class Portal extends React.Component<PortalProps, PortalState> {
             <Section
                 header={<TextHeader labelText="Trade History" />}
                 body={
-                    <TradeHistory
-                        tokenByAddress={this.props.tokenByAddress}
-                        userAddress={this.props.userAddress}
-                        networkId={this.props.networkId}
+                    <Loading
+                        isLoading={!this.props.blockchainIsLoaded}
+                        content={
+                            <TradeHistory
+                                tokenByAddress={this.props.tokenByAddress}
+                                userAddress={this.props.userAddress}
+                                networkId={this.props.networkId}
+                            />
+                        }
                     />
                 }
             />
@@ -342,10 +340,15 @@ export class Portal extends React.Component<PortalProps, PortalState> {
             <Section
                 header={<TextHeader labelText="Trade Direct" />}
                 body={
-                    <GenerateOrderForm
-                        blockchain={this._blockchain}
-                        hashData={this.props.hashData}
-                        dispatcher={this.props.dispatcher}
+                    <Loading
+                        isLoading={!this.props.blockchainIsLoaded}
+                        content={
+                            <GenerateOrderForm
+                                blockchain={this._blockchain}
+                                hashData={this.props.hashData}
+                                dispatcher={this.props.dispatcher}
+                            />
+                        }
                     />
                 }
             />
@@ -358,18 +361,23 @@ export class Portal extends React.Component<PortalProps, PortalState> {
             <Section
                 header={<TextHeader labelText="Your Account" />}
                 body={
-                    <TokenBalances
-                        blockchain={this._blockchain}
-                        blockchainErr={this.props.blockchainErr}
-                        blockchainIsLoaded={this.props.blockchainIsLoaded}
-                        dispatcher={this.props.dispatcher}
-                        screenWidth={this.props.screenWidth}
-                        tokenByAddress={this.props.tokenByAddress}
-                        trackedTokens={trackedTokens}
-                        userAddress={this.props.userAddress}
-                        userEtherBalanceInWei={this.props.userEtherBalanceInWei}
-                        networkId={this.props.networkId}
-                        lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                    <Loading
+                        isLoading={!this.props.blockchainIsLoaded}
+                        content={
+                            <TokenBalances
+                                blockchain={this._blockchain}
+                                blockchainErr={this.props.blockchainErr}
+                                blockchainIsLoaded={this.props.blockchainIsLoaded}
+                                dispatcher={this.props.dispatcher}
+                                screenWidth={this.props.screenWidth}
+                                tokenByAddress={this.props.tokenByAddress}
+                                trackedTokens={trackedTokens}
+                                userAddress={this.props.userAddress}
+                                userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+                                networkId={this.props.networkId}
+                                lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                            />
+                        }
                     />
                 }
             />
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index d8b06010b..b327c9817 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -60,14 +60,12 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
         if (!readyToRender) {
             return (
                 // TODO: consolidate this loading component with the one in portal
-                <div style={styles.root}>
-                    <div className="center">
-                        {_.isUndefined(this.state.error) ? (
-                            <CircularProgress size={40} thickness={5} />
-                        ) : (
-                            <Retry onRetry={this._fetchRelayerInfosAsync.bind(this)} />
-                        )}
-                    </div>
+                <div className="center">
+                    {_.isUndefined(this.state.error) ? (
+                        <CircularProgress size={40} thickness={5} />
+                    ) : (
+                        <Retry onRetry={this._fetchRelayerInfosAsync.bind(this)} />
+                    )}
                 </div>
             );
         } else {