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

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>
         );