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/amount_placeholder.tsx | |
parent | b4af27dd4462a001904ac6d69e43aac9fd7bb69a (diff) | |
download | dexon-sol-tools-8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7.tar dexon-sol-tools-8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7.tar.gz dexon-sol-tools-8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7.tar.bz2 dexon-sol-tools-8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7.tar.lz dexon-sol-tools-8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7.tar.xz dexon-sol-tools-8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7.tar.zst dexon-sol-tools-8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7.zip |
feat(instant): Indicate that order details section is loading by having pulsing placeholder
Diffstat (limited to 'packages/instant/src/components/amount_placeholder.tsx')
-rw-r--r-- | packages/instant/src/components/amount_placeholder.tsx | 17 |
1 files changed, 10 insertions, 7 deletions
diff --git a/packages/instant/src/components/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx index 54639effb..23a00895a 100644 --- a/packages/instant/src/components/amount_placeholder.tsx +++ b/packages/instant/src/components/amount_placeholder.tsx @@ -6,24 +6,27 @@ import { Pulse } from './animations/pulse'; import { Text } from './ui'; -export interface AmountPlaceholderProps { - pulsating: boolean; +export interface PlainPlaceholder { + color: ColorOption; } - -const PlainPlaceholder = () => ( - <Text fontWeight="bold" fontColor={ColorOption.white}> +export const PlainPlaceholder: React.StatelessComponent<PlainPlaceholder> = props => ( + <Text fontWeight="bold" fontColor={props.color}> — </Text> ); +export interface AmountPlaceholderProps { + color: ColorOption; + pulsating: boolean; +} export const AmountPlaceholder: React.StatelessComponent<AmountPlaceholderProps> = props => { if (props.pulsating) { return ( <Pulse> - <PlainPlaceholder /> + <PlainPlaceholder color={props.color} /> </Pulse> ); } else { - return <PlainPlaceholder />; + return <PlainPlaceholder color={props.color} />; } }; |