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
					
				
					 2 changed files with 6 additions and 3 deletions
				
			
		|  | @ -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 a new issue