Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Change design of modal loading and error screens in web UI (#33092)

Browse source
This commit is contained in:
Eugen Rochko 2024-11-29 08:50:08 +01:00 • committed by GitHub
parent eef8d2c855
commit 7f2cfcccab
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 118 additions and 234 deletions
Download patch file Download diff file Expand all files Collapse all files

61
app/javascript/mastodon/features/ui/components/modal_placeholder.tsx Normal file
View file

@ -0,0 +1,61 @@
import { useCallback } from 'react';
import { FormattedMessage } from 'react-intl';
import { Button } from 'mastodon/components/button';
import { GIF } from 'mastodon/components/gif';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
export const ModalPlaceholder: React.FC<{
loading: boolean;
onClose: (arg0: string | undefined, arg1: boolean) => void;
onRetry?: () => void;
}> = ({ loading, onClose, onRetry }) => {
const handleClose = useCallback(() => {
onClose(undefined, false);
}, [onClose]);
const handleRetry = useCallback(() => {
if (onRetry) onRetry();
}, [onRetry]);
return (
<div className='modal-root__modal modal-placeholder' aria-busy={loading}>
{loading ? (
<LoadingIndicator />
) : (
<div className='modal-placeholder__error'>
<GIF
src='/oops.gif'
staticSrc='/oops.png'
className='modal-placeholder__error__image'
/>
<div className='modal-placeholder__error__message'>
<p>
<FormattedMessage
id='bundle_modal_error.message'
defaultMessage='Something went wrong while loading this screen.'
/>
</p>
<div className='modal-placeholder__error__message__actions'>
<Button onClick={handleRetry}>
<FormattedMessage
id='bundle_modal_error.retry'
defaultMessage='Try again'
/>
</Button>
<Button onClick={handleClose} className='button button-tertiary'>
<FormattedMessage
id='bundle_modal_error.close'
defaultMessage='Close'
/>
</Button>
</div>
</div>
</div>
)}
</div>
);
};