Fix report submit button not being disabled during submission in web UI ()

Add loading indicator for status selection step in report dialog in web UI
This commit is contained in:
Eugen Rochko 2022-02-27 07:37:00 +01:00 committed by GitHub
parent 57814a98a9
commit 0883f05753
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 3 deletions
app/javascript/mastodon/features/report

View file

@ -74,7 +74,7 @@ class Comment extends React.PureComponent {
<div className='flex-spacer' />
<div className='report-dialog-modal__actions'>
<Button onClick={this.handleClick}><FormattedMessage id='report.submit' defaultMessage='Submit report' /></Button>
<Button onClick={this.handleClick} disabled={isSubmitting}><FormattedMessage id='report.submit' defaultMessage='Submit report' /></Button>
</div>
</React.Fragment>
);

View file

@ -6,9 +6,11 @@ import StatusCheckBox from 'mastodon/features/report/containers/status_check_box
import { OrderedSet } from 'immutable';
import { FormattedMessage } from 'react-intl';
import Button from 'mastodon/components/button';
import LoadingIndicator from 'mastodon/components/loading_indicator';
const mapStateToProps = (state, { accountId }) => ({
availableStatusIds: OrderedSet(state.getIn(['timelines', `account:${accountId}:with_replies`, 'items'])),
isLoading: state.getIn(['timelines', `account:${accountId}:with_replies`, 'isLoading']),
});
export default @connect(mapStateToProps)
@ -19,6 +21,7 @@ class Statuses extends React.PureComponent {
accountId: PropTypes.string.isRequired,
availableStatusIds: ImmutablePropTypes.set.isRequired,
selectedStatusIds: ImmutablePropTypes.set.isRequired,
isLoading: PropTypes.bool,
onToggle: PropTypes.func.isRequired,
};
@ -28,7 +31,7 @@ class Statuses extends React.PureComponent {
};
render () {
const { availableStatusIds, selectedStatusIds, onToggle } = this.props;
const { availableStatusIds, selectedStatusIds, onToggle, isLoading } = this.props;
return (
<React.Fragment>
@ -36,7 +39,7 @@ class Statuses extends React.PureComponent {
<p className='report-dialog-modal__lead'><FormattedMessage id='report.statuses.subtitle' defaultMessage='Select all that apply' /></p>
<div className='report-dialog-modal__statuses'>
{availableStatusIds.union(selectedStatusIds).map(statusId => (
{isLoading ? <LoadingIndicator /> : availableStatusIds.union(selectedStatusIds).map(statusId => (
<StatusCheckBox
id={statusId}
key={statusId}