Add a loading state to the dialog as well as an alert if there was an error

Author: gumaerc

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.tsx

@@ -7,6 +7,7 @@ import {
   Stack,
   Alert,
   Checkbox,
+  CircularProgress,
 } from "ol-components"
 import { Button } from "@mitodl/smoot-design"
 
@@ -18,6 +19,10 @@ const BoldText = styled.span(({ theme }) => ({
   ...theme.typography.subtitle1,
 }))
 
+const ButtonCircularProgress = styled(CircularProgress)({
+  marginLeft: "8px",
+})
+
 type DashboardDialogProps = {
   title: string
   enrollmentId: number
@@ -94,7 +99,9 @@ const UnenrollDialogInner: React.FC<DashboardDialogProps> = ({
     initialValues: {},
     onSubmit: async () => {
       await destroyEnrollment.mutateAsync()
-      modal.hide()
+      if (!destroyEnrollment.isError) {
+        modal.hide()
+      }
     },
   })
   return (
@@ -114,15 +121,28 @@ const UnenrollDialogInner: React.FC<DashboardDialogProps> = ({
           >
             Cancel
           </Button>
-          <Button variant="primary" type="submit">
+          <Button
+            variant="primary"
+            type="submit"
+            disabled={destroyEnrollment.isPending}
+          >
             Unenroll
+            {destroyEnrollment.isPending ? (
+              <ButtonCircularProgress size={16} />
+            ) : null}
           </Button>
         </DialogActions>
       }
     >
       <Typography variant="body1">
         Are you sure you want to unenroll from {title}?
       </Typography>
+      {destroyEnrollment.isError && (
+        <Alert severity="error">
+          There was a problem unenrolling you from this course. Please try again
+          later.
+        </Alert>
+      )}
     </FormDialog>
   )
 }