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:
		| @@ -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
	
	Block a user