vjrj
b710388f50
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.
46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
/* eslint-disable react/jsx-indent */
|
|
|
|
import React, { useRef, useEffect } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Meteor } from 'meteor/meteor';
|
|
import ProgressBar from 'progressbar.js';
|
|
|
|
import './LoadingBar.scss';
|
|
|
|
// 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);
|
|
|
|
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;
|