diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-19 05:51:45 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-19 06:32:32 +0800 |
commit | 8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7 (patch) | |
tree | 6cb3708c465f1c75783f763ecfd360e19d0b9a3b /packages/instant/src/components/instant_heading.tsx | |
parent | b4af27dd4462a001904ac6d69e43aac9fd7bb69a (diff) | |
download | dexon-0x-contracts-8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7.tar dexon-0x-contracts-8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7.tar.gz dexon-0x-contracts-8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7.tar.bz2 dexon-0x-contracts-8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7.tar.lz dexon-0x-contracts-8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7.tar.xz dexon-0x-contracts-8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7.tar.zst dexon-0x-contracts-8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7.zip |
feat(instant): Indicate that order details section is loading by having pulsing placeholder
Diffstat (limited to 'packages/instant/src/components/instant_heading.tsx')
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 13 |
1 files changed, 9 insertions, 4 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 9ca4ce598..6a4c850f2 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -17,6 +17,7 @@ export interface InstantHeadingProps { quoteRequestState: AsyncProcessState; } +const placeholderColor = ColorOption.white; export class InstantHeading extends React.Component<InstantHeadingProps, {}> { public render(): React.ReactNode { const placeholderAmountToAlwaysShow = this._placeholderAmountToAlwaysShow(); @@ -52,10 +53,10 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { private _placeholderAmountToAlwaysShow(): React.ReactNode | undefined { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { - return <AmountPlaceholder pulsating={true} />; + return <AmountPlaceholder pulsating={true} color={placeholderColor} />; } if (_.isUndefined(this.props.selectedAssetAmount)) { - return <AmountPlaceholder pulsating={false} />; + return <AmountPlaceholder pulsating={false} color={placeholderColor} />; } return undefined; } @@ -63,7 +64,11 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { private _ethAmount(): React.ReactNode { return ( <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}> - {format.ethBaseAmount(this.props.totalEthBaseAmount, 4, <AmountPlaceholder pulsating={false} />)} + {format.ethBaseAmount( + this.props.totalEthBaseAmount, + 4, + <AmountPlaceholder pulsating={false} color={placeholderColor} />, + )} </Text> ); } @@ -75,7 +80,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { this.props.totalEthBaseAmount, this.props.ethUsdPrice, 2, - <AmountPlaceholder pulsating={false} />, + <AmountPlaceholder pulsating={false} color={ColorOption.white} />, )} </Text> ); |