From 419bc0a9fffac3b87c7e411ff1019873fafa1586 Mon Sep 17 00:00:00 2001
From: Matthias Hannig <matthias@hannig.cc>
Date: Mon, 16 Jul 2018 22:53:35 +0200
Subject: [PATCH] added dealing with long loading times

---
 .../routeservers/routes/loading-indicator.jsx | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 client/components/routeservers/routes/loading-indicator.jsx

diff --git a/client/components/routeservers/routes/loading-indicator.jsx b/client/components/routeservers/routes/loading-indicator.jsx
new file mode 100644
index 0000000..18ecaf1
--- /dev/null
+++ b/client/components/routeservers/routes/loading-indicator.jsx
@@ -0,0 +1,90 @@
+
+import React from 'react'
+import {connect} from 'react-redux'
+
+import LoadingIndicator
+	from 'components/loading-indicator/small'
+
+
+class Indicator extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      displayMessages: 0,
+    };
+  }
+
+  isLoading(props) {
+    return (props.receivedLoading ||
+            props.filteredLoading ||
+            props.notExportedLoading);
+  }
+
+  componentDidMount() {
+    this.timeoutTimer = setInterval(
+      () => this.tickMessages(), 1000
+    );
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timeoutTimer);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!this.isLoading(this.props) &&
+        this.isLoading(this.props) != this.isLoading(prevProps)) {
+      // Stop timer
+      this.setState({displayMessages: 0});
+    }
+  }
+
+  tickMessages() {
+    this.setState((prevState, props) => ({
+      displayMessages: prevState.displayMessages + 1
+    }));
+  }
+
+  render() {
+    if (!this.isLoading(this.props)) {
+      return null;
+    }
+
+    return (
+      <div className="routes-loading card">
+        <LoadingIndicator show={true} />
+
+        {this.state.displayMessages >= 5 &&
+          <p>&gt; Still loading routes, please be patient.</p>}
+        {this.state.displayMessages >= 10 &&
+          <p>&gt; This seems to take a while...</p>}
+        {this.state.displayMessages >= 20 &&
+          <p>&gt; This usually only happens when there are really many routes!<br />
+             &nbsp; Please stand by a bit longer.</p>}
+
+        {this.state.displayMessages >= 30 &&
+          <p>&gt; This is taking really long...</p>}
+
+        {this.state.displayMessages >= 40 &&
+          <p>&gt; I heared there will be cake if you keep on waiting just a
+             bit longer!</p>}
+
+        {this.state.displayMessages >= 60 &&
+          <p>&gt; I guess the cake was a lie.</p>}
+      </div>
+    );
+  }
+
+}
+
+
+export default connect(
+  (state) => ({
+    receivedLoading:    state.routes.receivedLoading,
+    filteredLoading:    state.routes.filteredLoading,
+    notExportedLoading: state.routes.notExportedLoading,
+  })
+)(Indicator);
+
+