From b710388f5047c852aaf42c2e46ecba93ee37a108 Mon Sep 17 00:00:00 2001 From: vjrj Date: Tue, 21 Jul 2026 14:24:32 +0200 Subject: [PATCH] refactor: LoadingBar via progressbar.js + ref (drops react-progress-bar.js findDOMNode) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit react-progress-bar.js (unmaintained wrapper) rendered the progress line through findDOMNode. Reimplemented LoadingBar with progressbar.js directly (the wrapper's own underlying dep) via a ref + useEffect — same thin line (strokeWidth 2, #5A7636), no findDOMNode. Promoted progressbar.js to a direct dependency and removed react-progress-bar.js. Verified progressbar.js draws its SVG in-browser; findDOMNode gone from /fires and home; REST smoke byte-identical. --- imports/ui/components/Loading/LoadingBar.js | 47 +++++++++++---- package-lock.json | 67 ++++++++++----------- package.json | 2 +- 3 files changed, 67 insertions(+), 49 deletions(-) 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",