comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: LoadingBar via progressbar.js + ref (drops react-progress-bar.js findDOMNode)

Browse source 
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.
This commit is contained in:
vjrj 2026-07-21 14:24:32 +02:00
parent 0abf5b4f02
commit b710388f50
3 changed files with 67 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

47
imports/ui/components/Loading/LoadingBar.js
View file

@ -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 }) => (
<div className="loading-bar">
<Line
progress={Meteor.status().status !== 'connected' ? Meteor.status().retryCount / 10 : progress}
options={{ strokeWidth: 2, color: '#5A7636' }}
initialAnimate
/>
</div>
);
// 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 (
<div className="loading-bar">
<div ref={elRef} />
</div>
);
};
LoadingBar.propTypes = {
progress: PropTypes.number.isRequired
};
export default LoadingBar;