From 271b13414c9d9aa4fae99c817c53e615d7e5d1f2 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Tue, 3 Dec 2019 14:57:50 +0000
Subject: [PATCH] Add blinking cursor to show user that more output is to be
 expected.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 src/components/log/LiveLog.tsx | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/log/LiveLog.tsx b/src/components/log/LiveLog.tsx
index 2071799..2ca9d30 100644
--- a/src/components/log/LiveLog.tsx
+++ b/src/components/log/LiveLog.tsx
@@ -30,6 +30,30 @@ interface LiveLogState {
   }>;
 }
 
+const refreshingInverval = 500;
+class BlinkingCursor extends Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    this.state = { showText: true };
+
+    // Change the state every second
+    setInterval(
+      () => {
+        this.setState((previousState: any) => {
+          return { showText: !previousState.showText };
+        });
+      },
+      // Define blinking time.
+      refreshingInverval
+    );
+  }
+
+  render() {
+    let display = this.state.showText ? "_" : " ";
+    return <div style={{ marginBottom: 10 }}>{display}</div>;
+  }
+}
+
 let nextId = 0;
 let newdata = false;
 class LiveLog extends Component<LiveLogProps & WithTranslation, LiveLogState> {
@@ -95,6 +119,7 @@ class LiveLog extends Component<LiveLogProps & WithTranslation, LiveLogState> {
                   {getTimeFromTimestamp(item.timestamp) + " : " + item.message}
                 </div>
               ))}
+              <BlinkingCursor />
             </pre>
           </Col>
         </Row>
@@ -123,7 +148,7 @@ export default (props: any) => (
         return response;
       });
     }}
-    repeatOptions={{ interval: 500, ignoreCancel: true }}
+    repeatOptions={{ interval: refreshingInverval, ignoreCancel: true }}
     renderInitial={() => null}
     renderOk={data => <TranslatedLiveLog log={data.log} {...props} />}
     renderErr={() => null}