Fix report submit button not being disabled during submission in web UI (#17654)
Add loading indicator for status selection step in report dialog in web UI
This commit is contained in:
parent
57814a98a9
commit
0883f05753
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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}
|
||||
|
|
Reference in New Issue