Fix bugs with upload progress (#34325)
This commit is contained in:
parent
b4e56822c7
commit
65c553ab59
2 changed files with 25 additions and 26 deletions
|
@ -9,48 +9,39 @@ import { reduceMotion } from 'mastodon/initial_state';
|
|||
interface UploadProgressProps {
|
||||
active: boolean;
|
||||
progress: number;
|
||||
isProcessing: boolean;
|
||||
isProcessing?: boolean;
|
||||
}
|
||||
|
||||
export const UploadProgress: React.FC<UploadProgressProps> = ({
|
||||
active,
|
||||
progress,
|
||||
isProcessing,
|
||||
isProcessing = false,
|
||||
}) => {
|
||||
const styles = useSpring({
|
||||
from: { width: '0%' },
|
||||
to: { width: `${progress}%` },
|
||||
reset: true,
|
||||
immediate: reduceMotion,
|
||||
immediate: reduceMotion || !active, // If this is not active, update the UI immediately.
|
||||
});
|
||||
if (!active) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let message;
|
||||
|
||||
if (isProcessing) {
|
||||
message = (
|
||||
<FormattedMessage
|
||||
id='upload_progress.processing'
|
||||
defaultMessage='Processing…'
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
message = (
|
||||
<FormattedMessage
|
||||
id='upload_progress.label'
|
||||
defaultMessage='Uploading…'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='upload-progress'>
|
||||
<Icon id='upload' icon={UploadFileIcon} />
|
||||
|
||||
<div className='upload-progress__message'>
|
||||
{message}
|
||||
{isProcessing ? (
|
||||
<FormattedMessage
|
||||
id='upload_progress.processing'
|
||||
defaultMessage='Processing…'
|
||||
/>
|
||||
) : (
|
||||
<FormattedMessage
|
||||
id='upload_progress.label'
|
||||
defaultMessage='Uploading…'
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className='upload-progress__backdrop'>
|
||||
<animated.div className='upload-progress__tracker' style={styles} />
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue