From 3ded8c9f683ee6ffff39144bca0646e9025eb3ef Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Sat, 18 Apr 2020 17:19:23 +1000
Subject: [PATCH] chat-fe: add backlog loading indicator

Adds a backlog loading indicator that displays when we have not yet
received the backlog from the host.
---
 pkg/interface/chat/src/js/components/chat.js  |  9 +++++++
 .../src/js/components/lib/backlog-element.js  | 27 +++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 pkg/interface/chat/src/js/components/lib/backlog-element.js

diff --git a/pkg/interface/chat/src/js/components/chat.js b/pkg/interface/chat/src/js/components/chat.js
index b29b02d023..e82db6a082 100644
--- a/pkg/interface/chat/src/js/components/chat.js
+++ b/pkg/interface/chat/src/js/components/chat.js
@@ -7,6 +7,7 @@ import { Route, Link } from "react-router-dom";
 import { store } from "/store";
 
 import { ResubscribeElement } from '/components/lib/resubscribe-element';
+import { BacklogElement } from '/components/lib/backlog-element';
 import { Message } from '/components/lib/message';
 import { SidebarSwitcher } from '/components/lib/icons/icon-sidebar-switch.js';
 import { ChatTabBar } from '/components/lib/chat-tabbar';
@@ -335,6 +336,10 @@ export class ChatScreen extends Component {
               ref={el => {
                 this.scrollElement = el;
               }}></div>
+            {(props.chatInitialized &&
+              !(props.station in props.inbox)) && (
+                  <BacklogElement />
+            )}
             {(
               props.chatSynced &&
               !(props.station in props.chatSynced) &&
@@ -361,6 +366,10 @@ export class ChatScreen extends Component {
             ref={el => {
               this.scrollElement = el;
             }}></div>
+          {(props.chatInitialized &&
+            !(props.station in props.inbox)) && (
+                <BacklogElement />
+          )}
           {(
             props.chatSynced &&
             !(props.station in props.chatSynced) &&
diff --git a/pkg/interface/chat/src/js/components/lib/backlog-element.js b/pkg/interface/chat/src/js/components/lib/backlog-element.js
new file mode 100644
index 0000000000..fd27c6b5cb
--- /dev/null
+++ b/pkg/interface/chat/src/js/components/lib/backlog-element.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+
+
+export class BacklogElement extends Component {
+
+
+  render() {
+    let props = this.props;
+
+    return (
+      <div className="center mw6">
+        <div className="db pa3 ma3 ba b--gray4 bg-gray5 b--gray2-d bg-gray1-d white-d flex items-center">
+            <img className="invert-d spin-active v-mid"
+              src="/~chat/img/Spinner.png"
+              width={16}
+              height={16}
+            />
+            <p className="lh-copy db ml3">
+            Past messages are being restored
+            </p>
+        </div>
+      </div>
+
+    );
+  }
+}