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) => {