imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix progress bar regression throughout the app (#9219)

Browse source 
* Fix useSmoothAnimation enablement not working properly by getting rid of it

Passing duration=0 is more logical and less superfluous

* Refactor UploadBar to handle state more correctly

* Change ProgressBar to new useSmoothAnimation signature and default animated to true for consistency

* Add type guard

* Make types stricter

* Write tests for the ProgressBar component

* Make the new test conform to tsc --strict

* Update UploadBar.tsx

* Update UploadBar.tsx

* Update UploadBar.tsx
This commit is contained in:
Michael Telatynski 2022-08-25 16:39:00 +01:00 • committed by GitHub
parent 6407cd4c0d
commit 9b99c967f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 105 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/views/elements/ProgressBar.tsx
View file

@ -25,10 +25,10 @@ interface IProps {
}
const PROGRESS_BAR_ANIMATION_DURATION = 300;
const ProgressBar: React.FC<IProps> = ({ value, max, animated }) => {
const ProgressBar: React.FC<IProps> = ({ value, max, animated = true }) => {
// Animating progress bars via CSS transition isn’t possible in all of our supported browsers yet.
// As workaround, we’re using animations through JS requestAnimationFrame
const currentValue = useSmoothAnimation(0, value, PROGRESS_BAR_ANIMATION_DURATION, animated);
const currentValue = useSmoothAnimation(0, value, animated ? PROGRESS_BAR_ANIMATION_DURATION : 0);
return <progress className="mx_ProgressBar" max={max} value={currentValue} />;
};