diff --git a/src/proctored-exam-settings/ProctoredExamSettings.jsx b/src/proctored-exam-settings/ProctoredExamSettings.jsx
index 5dc05e923..e24b56a3e 100644
--- a/src/proctored-exam-settings/ProctoredExamSettings.jsx
+++ b/src/proctored-exam-settings/ProctoredExamSettings.jsx
@@ -26,6 +26,7 @@ function ExamSettings(props) {
const [courseStartDate, setCourseStartDate] = useState('');
const [saveSuccess, setSaveSuccess] = useState(false);
const [saveError, setSaveError] = useState(false);
+ const [submissionInProgress, setSubmissionInProgress] = useState(false);
function onEnableProctoredExamsChange(event) {
setEnableProctoredExams(event.target.checked);
@@ -64,12 +65,15 @@ function ExamSettings(props) {
create_zendesk_tickets: createZendeskTickets,
},
};
+ setSubmissionInProgress(true);
StudioApiService.saveProctoredExamSettingsData(props.courseId, dataToPostBack).then(() => {
setSaveSuccess(true);
setSaveError(false);
+ setSubmissionInProgress(false);
}).catch(() => {
setSaveSuccess(false);
setSaveError(true);
+ setSubmissionInProgress(false);
});
}
@@ -238,9 +242,11 @@ function ExamSettings(props) {
className="btn-primary mb-3"
data-test-id="submissionButton"
onClick={onButtonClick}
+ disabled={submissionInProgress}
>
Submit
-
+ {' '}
+ {submissionInProgress && }
);
}
@@ -320,6 +326,7 @@ function ExamSettings(props) {
const proctoredExamSettings = response.data.proctored_exam_settings;
setLoaded(true);
setLoading(false);
+ setSubmissionInProgress(false);
setCourseStartDate(response.data.course_start_date);
setEnableProctoredExams(proctoredExamSettings.enable_proctored_exams);
setAllowOptingOut(proctoredExamSettings.allow_proctoring_opt_out);
@@ -337,6 +344,7 @@ function ExamSettings(props) {
}
setLoading(false);
setLoaded(false);
+ setSubmissionInProgress(false);
},
);
}, [],
diff --git a/src/proctored-exam-settings/ProctoredExamSettings.test.jsx b/src/proctored-exam-settings/ProctoredExamSettings.test.jsx
index 9b4875e32..c3a479719 100644
--- a/src/proctored-exam-settings/ProctoredExamSettings.test.jsx
+++ b/src/proctored-exam-settings/ProctoredExamSettings.test.jsx
@@ -296,6 +296,19 @@ describe('ProctoredExamSettings save settings tests', () => {
return { mockClientGet, mockClientPost };
}
+ it('Show spinner while saving', async () => {
+ const mockedFunctions = mockAPI(mockGetData, { data: 'success' });
+ await act(async () => render());
+ const submitButton = screen.getByTestId('submissionButton');
+ expect(screen.queryByTestId('saveInProgress')).toBeFalsy();
+ fireEvent.click(submitButton);
+ const submitSpinner = screen.getByTestId('saveInProgress');
+ expect(submitSpinner).toBeDefined();
+ expect(mockedFunctions.mockClientPost).toHaveBeenCalled();
+ await waitForElementToBeRemoved(submitSpinner);
+ expect(screen.queryByTestId('saveInProgress')).toBeFalsy();
+ });
+
it('Makes API call successfully', async () => {
const mockedFunctions = mockAPI(mockGetData, { data: 'success' });
await act(async () => render());