diff --git a/imports/ui/components/Loading/LoadingBar.js b/imports/ui/components/Loading/LoadingBar.js
index 5dab00c..2675852 100644
--- a/imports/ui/components/Loading/LoadingBar.js
+++ b/imports/ui/components/Loading/LoadingBar.js
@@ -1,25 +1,46 @@
/* eslint-disable react/jsx-indent */
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Meteor } from 'meteor/meteor';
-import { Line } from 'react-progress-bar.js';
+import ProgressBar from 'progressbar.js';
import './LoadingBar.scss';
-// Check: https://github.com/kimmobrunfeldt/react-progressbar.js/pull/26
-const LoadingBar = ({ progress }) => (
-
-
-
-);
+// Uses progressbar.js directly through a ref, replacing the react-progress-bar.js
+// wrapper (which relied on the deprecated findDOMNode).
+const LoadingBar = ({ progress }) => {
+ const elRef = useRef(null);
+ const barRef = useRef(null);
-export default LoadingBar;
+ const status = Meteor.status();
+ const target = status.status !== 'connected' ? status.retryCount / 10 : progress;
+ const clamped = Math.max(0, Math.min(1, target));
+
+ useEffect(() => {
+ barRef.current = new ProgressBar.Line(elRef.current, {
+ strokeWidth: 2,
+ color: '#5A7636'
+ });
+ return () => {
+ if (barRef.current) barRef.current.destroy();
+ barRef.current = null;
+ };
+ }, []);
+
+ useEffect(() => {
+ if (barRef.current) barRef.current.animate(clamped);
+ }, [clamped]);
+
+ return (
+
+ );
+};
LoadingBar.propTypes = {
progress: PropTypes.number.isRequired
};
+
+export default LoadingBar;
diff --git a/package-lock.json b/package-lock.json
index e3ad3b4..694c870 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,6 +55,7 @@
"pm2-master": "^1.1.3",
"popper.js": "^1.12.7",
"prerender-node": "^2.7.4",
+ "progressbar.js": "^1.1.1",
"prop-types": "^15.6.0",
"push.js": "^1.0.5",
"rc-slider": "^8.5.0",
@@ -71,7 +72,6 @@
"react-leaflet-google": "^3.2.1",
"react-mobile-store-button": "0.0.3",
"react-places-autocomplete": "^5.4.3",
- "react-progress-bar.js": "^0.2.3",
"react-resize-detector": "^1.1.0",
"react-router-bootstrap": "^0.26.3",
"react-router-dom": "^6.30.4",
@@ -4310,11 +4310,6 @@
"resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
"integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM="
},
- "node_modules/cheerio/node_modules/lodash.merge": {
- "version": "4.6.0",
- "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.0.tgz",
- "integrity": "sha1-aYhLoUSsM/5plzemCG3v+t0PicU="
- },
"node_modules/chownr": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
@@ -11450,12 +11445,6 @@
"resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
"integrity": "sha1-b4bL7di+TsmHvpqvM8loTbGzHn4="
},
- "node_modules/lodash.isequal": {
- "version": "4.5.0",
- "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
- "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
- "deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead."
- },
"node_modules/lodash.istypedarray": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/lodash.istypedarray/-/lodash.istypedarray-3.0.6.tgz",
@@ -11483,9 +11472,10 @@
"dev": true
},
"node_modules/lodash.merge": {
- "version": "4.6.1",
- "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.1.tgz",
- "integrity": "sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ=="
+ "version": "4.6.2",
+ "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+ "license": "MIT"
},
"node_modules/lodash.omit": {
"version": "4.5.0",
@@ -19268,11 +19258,13 @@
}
},
"node_modules/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=",
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/progressbar.js/-/progressbar.js-1.1.1.tgz",
+ "integrity": "sha512-FBsw3BKsUbb+hNeYfiP3xzvAAQrPi4DnGDw66bCmfuRCDLcslxyxv2GyYUdBSKFGSIBa73CUP5WMcl6F8AAXlw==",
+ "license": "MIT",
"dependencies": {
- "shifty": "^1.5.2"
+ "lodash.merge": "^4.6.2",
+ "shifty": "^2.8.3"
}
},
"node_modules/prop-types": {
@@ -19737,19 +19729,6 @@
"react": ">=0.14.7"
}
},
- "node_modules/react-progress-bar.js": {
- "version": "0.2.3",
- "resolved": "https://registry.npmjs.org/react-progress-bar.js/-/react-progress-bar.js-0.2.3.tgz",
- "integrity": "sha512-dyPLW0Wux9uOgEdz9xCtdeS/FD14KwygyW3dNLkogZ7GM1SMaI2yQ3uhQ0S/CyyPhtjAKWbH5XvzI0bnytDbxQ==",
- "dependencies": {
- "lodash.isequal": "^4.1.4",
- "progressbar.js": "^1.0.1"
- },
- "peerDependencies": {
- "react": "^15.0.0 || ^16.0.0",
- "react-dom": "^15.0.0 || ^16.0.0"
- }
- },
"node_modules/react-resize-detector": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-1.1.0.tgz",
@@ -20642,9 +20621,27 @@
"dev": true
},
"node_modules/shifty": {
- "version": "1.5.4",
- "resolved": "https://registry.npmjs.org/shifty/-/shifty-1.5.4.tgz",
- "integrity": "sha1-1DYvyRTdKA3fblIr5AiyEgMgg0Y="
+ "version": "2.20.4",
+ "resolved": "https://registry.npmjs.org/shifty/-/shifty-2.20.4.tgz",
+ "integrity": "sha512-4Y0qRkg8ME5XN8yGNAwmFOmsIURGFKT9UQfNL6DDJQErYtN5HsjyoBuJn41ZQfTkuu2rIbRMn9qazjKsDpO2TA==",
+ "license": "MIT",
+ "optionalDependencies": {
+ "fsevents": "^2.3.2"
+ }
+ },
+ "node_modules/shifty/node_modules/fsevents": {
+ "version": "2.3.3",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+ "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+ "hasInstallScript": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+ }
},
"node_modules/shimmer": {
"version": "1.2.1",
diff --git a/package.json b/package.json
index 09b9a11..5f22e9b 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
"pm2-master": "^1.1.3",
"popper.js": "^1.12.7",
"prerender-node": "^2.7.4",
+ "progressbar.js": "^1.1.1",
"prop-types": "^15.6.0",
"push.js": "^1.0.5",
"rc-slider": "^8.5.0",
@@ -71,7 +72,6 @@
"react-leaflet-google": "^3.2.1",
"react-mobile-store-button": "0.0.3",
"react-places-autocomplete": "^5.4.3",
- "react-progress-bar.js": "^0.2.3",
"react-resize-detector": "^1.1.0",
"react-router-bootstrap": "^0.26.3",
"react-router-dom": "^6.30.4",