Add loading spinners to buttons

webclient/src/Classes.js

@@ -92,6 +92,7 @@ export function ClassDetail(props) {
 	const [clazz, setClass] = useState(false);
 	const [refreshCount, refreshClass] = useReducer(x => x + 1, 0);
 	const [error, setError] = useState(false);
+	const [loading, setLoading] = useState(false);
 	const { token, user, refreshUser } = props;
 	const { id } = useParams();
 	const userTraining = clazz && clazz.students.find(x => x.user == user.id);
@@ -108,6 +109,7 @@ export function ClassDetail(props) {
 	}, [refreshCount]);
 
 	const handleSignup = () => {
+		setLoading(true);
 		const data = { attendance_status: 'Waiting for payment', session: id };
 		requester('/training/', 'POST', token, data)
 		.then(res => {
@@ -120,6 +122,7 @@ export function ClassDetail(props) {
 	};
 
 	const handleToggle = (newStatus) => {
+		setLoading(true);
 		const data = { attendance_status: newStatus, session: id };
 		requester('/training/'+userTraining.id+'/', 'PUT', token, data)
 		.then(res => {
@@ -132,6 +135,10 @@ export function ClassDetail(props) {
 		});
 	};
 
+	useEffect(() => {
+		setLoading(false);
+	}, [userTraining]);
+
 	// TODO: calculate yesterday and lock signups
 
 	return (
@@ -198,11 +205,11 @@ export function ClassDetail(props) {
 									<p>Status: {userTraining.attendance_status}</p>
 									<p>
 										{userTraining.attendance_status === 'Withdrawn' ?
-											<Button onClick={() => handleToggle('Waiting for payment')}>
+											<Button loading={loading} onClick={() => handleToggle('Waiting for payment')}>
 												Sign back up
 											</Button>
 										:
-											<Button onClick={() => handleToggle('Withdrawn')}>
+											<Button loading={loading} onClick={() => handleToggle('Withdrawn')}>
 												Withdraw from Class
 											</Button>
 										}
@@ -226,7 +233,7 @@ export function ClassDetail(props) {
 									((clazz.max_students && clazz.student_count >= clazz.max_students) ?
 										<p>The class is full.</p>
 									:
-										<Button onClick={handleSignup}>
+										<Button loading={loading} onClick={handleSignup}>
 											Sign me up!
 										</Button>
 									)

webclient/src/InstructorClasses.js

@@ -68,8 +68,10 @@ class AttendanceSheet extends React.Component {
 function AttendanceRow(props) {
 	const { student, token, refreshClass } = props;
 	const [error, setError] = useState(false);
+	const [loading, setLoading] = useState(false);
 
 	const handleMark = (newStatus) => {
+		setLoading(newStatus);
 		const data = { ...student, attendance_status: newStatus };
 		requester('/training/'+student.id+'/', 'PATCH', token, data)
 		.then(res => {
@@ -86,8 +88,13 @@ function AttendanceRow(props) {
 		onClick: () => handleMark(name),
 		toggle: true,
 		active: student.attendance_status === name,
+		loading: loading === name,
 	});
 
+	useEffect(() => {
+		setLoading(false);
+	}, [student.attendance_status]);
+
 	return (
 		<div className='attendance-row'>
 			<p>{student.student_name}{student.attendance_status === 'Waiting for payment' && ' (Waiting for payment)'}:</p>