crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace heavy loading animation with simple circular loader

Browse Source
This commit is contained in:
Fabio Berger
2018-01-29 10:46:15 +01:00
parent 3c3f9ca85b
commit d18554e0e8
5 changed files with 14 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/website/ts/components/portal.tsx
View File

@@ -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>

39
packages/website/ts/components/ui/loading.tsx
View File

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