Add empty placeholder

3 files changed, 38 insertions, 2 deletions

diff --git a/app/containers/App/Console.js b/app/containers/App/Console.js
index bb2f2ab..98d4147 100644
--- a/app/containers/App/Console.js
+++ b/app/containers/App/Console.js
@@ -2,7 +2,9 @@ import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import { Container, Header } from '@/components/Mux';
 import LotteryContract from '@/services/Lottery';
+
 import LotteryItem from './LotteryItem';
+import EmptyItem from './EmptyItem';
 
 const StretchedContainer = styled(Container)`
   flex: 1 1 auto;
@@ -23,8 +25,8 @@ class Console extends PureComponent {
   };
 
   componentDidMount() {
-    this.updateList();
-    setInterval(this.updateList, 10000);
+    // this.updateList();
+    // setInterval(this.updateList, 10000);
   }
 
   setBodyRef = (ref) => {
@@ -68,6 +70,8 @@ class Console extends PureComponent {
               rawValue={event.returnValues[2]}
             />
           ))}
+
+          {!list.length && <EmptyItem />}
         </Body>
       </StretchedContainer>
     );
diff --git a/app/containers/App/EmptyItem.js b/app/containers/App/EmptyItem.js
new file mode 100644
index 0000000..72cdc10
--- /dev/null
+++ b/app/containers/App/EmptyItem.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const blink = keyframes`
+  from, to {
+    color: transparent;
+  }
+
+  50% {
+    color: white;
+  }
+`;
+
+const Marker = styled.span`
+  animation: ${blink} 1s step-end infinite;
+`;
+
+const Item = styled.div`
+  flex: 1 0 auto;
+  display: flex;
+  align-items: flex-end;
+  white-space: pre;
+`;
+
+const LotteryItem = () => (
+  <Item>
+    Place your bets! We will have a lucky winner soon...<Marker>_</Marker>
+  </Item>
+);
+
+export default LotteryItem;
diff --git a/app/containers/App/LotteryItem.js b/app/containers/App/LotteryItem.js
index 454f430..fa10ed7 100644
--- a/app/containers/App/LotteryItem.js
+++ b/app/containers/App/LotteryItem.js
@@ -18,6 +18,7 @@ const Marker = styled.span`
 `;
 
 const Item = styled.a`
+  min-height: min-content;
   margin-top: 20px;
   flex: 1 0 auto;
   display: flex;