Added progress bar to fires map

imports/ui/components/Loading/LoadingBar.js

@@ -0,0 +1,24 @@
+/* eslint-disable react/jsx-indent */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Line } from 'react-progressbar.js';
+
+import './LoadingBar.scss';
+
+// Check: https://github.com/kimmobrunfeldt/react-progressbar.js/pull/26
+const LoadingBar = ({ progress }) => (
+  <div className="loading-bar">
+    <Line
+      progress={progress}
+      options={{ strokeWidth: 2, color: '#5A7636' }}
+      initialAnimate
+    />
+  </div>
+);
+
+export default LoadingBar;
+
+LoadingBar.propTypes = {
+  progress: PropTypes.number.isRequired
+};

imports/ui/components/Loading/LoadingBar.scss

@@ -0,0 +1,5 @@
+.loading-bar {
+  height: 3px;
+  overflow: hidden;
+  margin-top: -3px;
+}

imports/ui/pages/FiresMap/FiresMap.js

@@ -12,6 +12,7 @@ import { Helmet } from 'react-helmet';
 import { Trans, translate } from 'react-i18next';
 import { Map } from 'react-leaflet';
 import Control from 'react-leaflet-control';
+import LoadingBar from '/imports/ui/components/Loading/LoadingBar';
 import _ from 'lodash';
 import store from 'store';
 import L from 'leaflet';
@@ -235,6 +236,9 @@ class FiresMap extends React.Component {
                 </p>
              </Col>
            </Row>
+           {this.props.loading || !this.props.subsready ?
+            <LoadingBar progress={this.props.loading ? 0.9 : 1} />
+            : ''}
            {/* https://github.com/CliffCloud/Leaflet.Sleep */}
            <Map
                ref={(map) => {

package-lock.json

@@ -7698,6 +7698,11 @@
       "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
       "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.isfunction": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.8.tgz",
@@ -9929,6 +9934,14 @@
       "integrity": "sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8=",
       "dev": true
     },
+    "progressbar.js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/progressbar.js/-/progressbar.js-1.0.1.tgz",
+      "integrity": "sha1-9/v8GVJA/guzL2972y5/9ADqcfk=",
+      "requires": {
+        "shifty": "1.5.4"
+      }
+    },
     "promise": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
@@ -10412,6 +10425,15 @@
         "prop-types": "15.6.0"
       }
     },
+    "react-progressbar.js": {
+      "version": "git://github.com/squarecat/react-progressbar.js.git#1ff715a3c9dc0f8089127902824cf13a8907f96f",
+      "requires": {
+        "lodash.isequal": "4.5.0",
+        "progressbar.js": "1.0.1",
+        "react": "16.2.0",
+        "react-dom": "16.2.0"
+      }
+    },
     "react-resize-detector": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-1.1.0.tgz",
@@ -11232,6 +11254,11 @@
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
       "dev": true
     },
+    "shifty": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/shifty/-/shifty-1.5.4.tgz",
+      "integrity": "sha1-1DYvyRTdKA3fblIr5AiyEgMgg0Y="
+    },
     "signal-exit": {
       "version": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="

package.json

@@ -66,6 +66,7 @@
     "react-leaflet-google": "^3.2.1",
     "react-leaflet-sidebarv2": "^0.5.1",
     "react-places-autocomplete": "^5.4.3",
+    "react-progressbar.js": "git://github.com/squarecat/react-progressbar.js.git",
     "react-resize-detector": "^1.1.0",
     "react-router-bootstrap": "^0.24.4",
     "react-router-dom": "^4.2.2",