feat(instant): Indicate that order details section is loading by having pulsing placeholder

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}>
         &mdash;
     </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} />;
     }
 };