diff --git a/imports/ui/components/Loading/LoadingBar.js b/imports/ui/components/Loading/LoadingBar.js new file mode 100644 index 0000000..943e9a5 --- /dev/null +++ b/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 }) => ( +
+ +
+); + +export default LoadingBar; + +LoadingBar.propTypes = { + progress: PropTypes.number.isRequired +}; diff --git a/imports/ui/components/Loading/LoadingBar.scss b/imports/ui/components/Loading/LoadingBar.scss new file mode 100644 index 0000000..a570180 --- /dev/null +++ b/imports/ui/components/Loading/LoadingBar.scss @@ -0,0 +1,5 @@ +.loading-bar { + height: 3px; + overflow: hidden; + margin-top: -3px; +} diff --git a/imports/ui/pages/FiresMap/FiresMap.js b/imports/ui/pages/FiresMap/FiresMap.js index 865b29c..155f202 100644 --- a/imports/ui/pages/FiresMap/FiresMap.js +++ b/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 {

+ {this.props.loading || !this.props.subsready ? + + : ''} {/* https://github.com/CliffCloud/Leaflet.Sleep */} { diff --git a/package-lock.json b/package-lock.json index 44d1d4c..3b0e2cb 100644 --- a/package-lock.json +++ b/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=" diff --git a/package.json b/package.json index 26191ba..5c59245 100644 --- a/package.json +++ b/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",