From 8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
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/instant_heading.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

(limited to 'packages/instant/src/components/instant_heading.tsx')

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>
         );
-- 
cgit v1.2.3