diff options
| -rw-r--r-- | packages/website/public/gifs/0xAnimation.gif | bin | 909585 -> 0 bytes | |||
| -rw-r--r-- | packages/website/public/images/loading_poster.png | bin | 2505 -> 0 bytes | |||
| -rw-r--r-- | packages/website/public/videos/0xAnimation.mp4 | bin | 970342 -> 0 bytes | |||
| -rw-r--r-- | packages/website/ts/components/portal.tsx | 16 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/loading.tsx | 39 |
5 files changed, 14 insertions, 41 deletions
diff --git a/packages/website/public/gifs/0xAnimation.gif b/packages/website/public/gifs/0xAnimation.gif Binary files differdeleted file mode 100644 index b3e32a6ad..000000000 --- a/packages/website/public/gifs/0xAnimation.gif +++ /dev/null diff --git a/packages/website/public/images/loading_poster.png b/packages/website/public/images/loading_poster.png Binary files differdeleted file mode 100644 index e5618f260..000000000 --- a/packages/website/public/images/loading_poster.png +++ /dev/null diff --git a/packages/website/public/videos/0xAnimation.mp4 b/packages/website/public/videos/0xAnimation.mp4 Binary files differdeleted file mode 100644 index d78c07d4f..000000000 --- a/packages/website/public/videos/0xAnimation.mp4 +++ /dev/null diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx index e8190e2f5..0182a91f7 100644 --- a/packages/website/ts/components/portal.tsx +++ b/packages/website/ts/components/portal.tsx @@ -1,5 +1,6 @@ import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; +import CircularProgress from 'material-ui/CircularProgress'; import Paper from 'material-ui/Paper'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; @@ -17,7 +18,6 @@ import { TokenBalances } from 'ts/components/token_balances'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; import { FlashMessage } from 'ts/components/ui/flash_message'; -import { Loading } from 'ts/components/ui/loading'; import { GenerateOrderForm } from 'ts/containers/generate_order_form'; import { localStorage } from 'ts/local_storage/local_storage'; import { Dispatcher } from 'ts/redux/dispatcher'; @@ -223,7 +223,19 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { /> </Switch> ) : ( - <Loading /> + <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 className="center pt2" style={{ paddingBottom: 11 }}> + Loading Portal... + </div> + </div> + </div> )} </div> </div> diff --git a/packages/website/ts/components/ui/loading.tsx b/packages/website/ts/components/ui/loading.tsx deleted file mode 100644 index aa319e9e9..000000000 --- a/packages/website/ts/components/ui/loading.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import * as _ from 'lodash'; -import Paper from 'material-ui/Paper'; -import * as React from 'react'; -import { DefaultPlayer as Video } from 'react-html5video'; -import 'react-html5video/dist/styles.css'; -import { utils } from 'ts/utils/utils'; - -interface LoadingProps {} - -interface LoadingState {} - -export class Loading extends React.Component<LoadingProps, LoadingState> { - public render() { - return ( - <div className="pt4 sm-px2 sm-pt2 sm-m1" style={{ height: 500 }}> - <Paper className="mx-auto" style={{ maxWidth: 400 }}> - {utils.isUserOnMobile() ? ( - <img className="p1" src="/gifs/0xAnimation.gif" width="96%" /> - ) : ( - <div style={{ pointerEvents: 'none' }}> - <Video - autoPlay={true} - loop={true} - muted={true} - controls={[]} - poster="/images/loading_poster.png" - > - <source src="/videos/0xAnimation.mp4" type="video/mp4" /> - </Video> - </div> - )} - <div className="center pt2" style={{ paddingBottom: 11 }}> - Connecting to the blockchain... - </div> - </Paper> - </div> - ); - } -} |
