Pulsating holder element showing, even if amount is empty

1 files changed, 29 insertions, 0 deletions

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 = () => (
+    <Text fontWeight="bold" fontColor={ColorOption.white}>
+        &mdash;
+    </Text>
+);
+
+export const AmountPlaceholder: React.StatelessComponent<AmountPlaceholderProps> = props => {
+    if (props.pulsating) {
+        return (
+            <Pulse>
+                <PlainPlaceholder />
+            </Pulse>
+        );
+    } else {
+        return <PlainPlaceholder />;
+    }
+};