Disable buttons during processing

src/ClassicTestStart.js

@@ -65,6 +65,7 @@ export default function ClassicTestStart(props) {
 					icon={<ArrowForwardRoundedIcon />}
 					className="button--round continue-button"
 					loading={props.loading}
+					disabled={props.disabled}
 				></Button>
 
 				<Button

src/LivesTestStart.js

@@ -65,6 +65,7 @@ export default function LivesTestStart(props) {
 					icon={<ArrowForwardRoundedIcon />}
 					className="button--round continue-button"
 					loading={props.loading}
+					disabled={props.disabled}
 				></Button>
 
 				<Button

src/LoggedInHome.js

@@ -67,6 +67,7 @@ export default withRouter(class LoggedInHome extends React.Component {
 			sliderValue: 1,
 			switchLanguage: false,
 			totalTestQuestions: 1,
+			pendingDeletions: {},
 		};
 
 		let isMounted = true;
@@ -231,17 +232,36 @@ export default withRouter(class LoggedInHome extends React.Component {
 	}
 
 	deleteProgress = (progressId) => {
-		this.state.db.collection("progress")
+		if (this.state.pendingDeletions[progressId] !== true) {
+			let pendingDeletions = this.state.pendingDeletions;
+			pendingDeletions[progressId] = true;
+			
+			this.setState({
+				pendingDeletions: pendingDeletions,
+			});
+			
+			this.state.db.collection("progress")
 			.doc(progressId)
 			.delete()
 			.then(() => {
 				const progressIndex = this.state.progressHistoryIncomplete.map((obj) => obj.id).indexOf(progressId);
 				let newState = {
-					progressHistoryIncomplete: this.state.progressHistoryIncomplete,
+						progressHistoryIncomplete: this.state.progressHistoryIncomplete,
-				};
+					};
-				newState.progressHistoryIncomplete.splice(progressIndex, 1);
+					newState.progressHistoryIncomplete.splice(progressIndex, 1);
-				this.setState(newState);
+					newState.pendingDeletions = this.state.pendingDeletions;
-			});
+					delete pendingDeletions[progressId];
+					this.setState(newState);
+				})
+				.catch((error) => {
+					console.log(`Couldn't delete progress: ${error}`);
+					let pendingDeletions = this.state.pendingDeletions;
+					delete pendingDeletions[progressId];
+					this.setState({
+						pendingDeletions: pendingDeletions,
+					});
+				});
+		}
 	}
 
 	showTestStart = () => {
@@ -427,6 +447,8 @@ export default withRouter(class LoggedInHome extends React.Component {
 													className="button--no-background"
 													onClick={() => this.deleteProgress(progressItem.id)}
 													icon={<DeleteRoundedIcon />}
+													disabled={this.state.pendingDeletions[progressItem.id] === true}
+													loading={this.state.pendingDeletions[progressItem.id] === true}
 												></Button>
 											</p>
 										</div>

src/SetPage.js

@@ -485,6 +485,7 @@ export default withRouter(class SetPage extends React.Component {
 								switchLanguage={this.state.switchLanguage}
 								handleSwitchLanguageChange={this.handleSwitchLanguageChange}
 									loading={this.state.loading}
+									disabled={!this.state.canStartTest}
 							/>
 						}
 						{
@@ -498,6 +499,7 @@ export default withRouter(class SetPage extends React.Component {
 								switchLanguage={this.state.switchLanguage}
 								handleSwitchLanguageChange={this.handleSwitchLanguageChange}
 								loading={this.state.loading}
+								disabled={!this.state.canStartTest}
 							/>
 						}
 						{