From 12b6877aeb0a6bcddab4193b62cd10347b8c328b Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 13:31:11 -0700 Subject: Pulsating holder element showing, even if amount is empty --- .../instant/src/components/amount_placeholder.tsx | 29 ++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 packages/instant/src/components/amount_placeholder.tsx (limited to 'packages/instant/src/components/amount_placeholder.tsx') diff --git a/packages/instant/src/components/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx new file mode 100644 index 000000000..54639effb --- /dev/null +++ b/packages/instant/src/components/amount_placeholder.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Pulse } from './animations/pulse'; + +import { Text } from './ui'; + +export interface AmountPlaceholderProps { + pulsating: boolean; +} + +const PlainPlaceholder = () => ( + + — + +); + +export const AmountPlaceholder: React.StatelessComponent = props => { + if (props.pulsating) { + return ( + + + + ); + } else { + return ; + } +}; -- cgit From 8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 14:51:45 -0700 Subject: feat(instant): Indicate that order details section is loading by having pulsing placeholder --- packages/instant/src/components/amount_placeholder.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) (limited to 'packages/instant/src/components/amount_placeholder.tsx') 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 = () => ( - +export const PlainPlaceholder: React.StatelessComponent = props => ( + ); +export interface AmountPlaceholderProps { + color: ColorOption; + pulsating: boolean; +} export const AmountPlaceholder: React.StatelessComponent = props => { if (props.pulsating) { return ( - + ); } else { - return ; + return ; } }; -- cgit From aa0e07b0581a645c3d2ea035d3acf28a74de0384 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 15:30:14 -0700 Subject: pulsating -> isPulsating --- packages/instant/src/components/amount_placeholder.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/instant/src/components/amount_placeholder.tsx') diff --git a/packages/instant/src/components/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx index 23a00895a..e27d0ba81 100644 --- a/packages/instant/src/components/amount_placeholder.tsx +++ b/packages/instant/src/components/amount_placeholder.tsx @@ -17,10 +17,10 @@ export const PlainPlaceholder: React.StatelessComponent = prop export interface AmountPlaceholderProps { color: ColorOption; - pulsating: boolean; + isPulsating: boolean; } export const AmountPlaceholder: React.StatelessComponent = props => { - if (props.pulsating) { + if (props.isPulsating) { return ( -- cgit From 6588cf919ef70f54754b1428df51e967b817788a Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 10:34:44 -0700 Subject: dont export PlainPlaceholder --- packages/instant/src/components/amount_placeholder.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/instant/src/components/amount_placeholder.tsx') diff --git a/packages/instant/src/components/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx index e27d0ba81..6ef8f0ac3 100644 --- a/packages/instant/src/components/amount_placeholder.tsx +++ b/packages/instant/src/components/amount_placeholder.tsx @@ -6,10 +6,10 @@ import { Pulse } from './animations/pulse'; import { Text } from './ui'; -export interface PlainPlaceholder { +interface PlainPlaceholder { color: ColorOption; } -export const PlainPlaceholder: React.StatelessComponent = props => ( +const PlainPlaceholder: React.StatelessComponent = props => ( -- cgit