434: put loading spinner backdrop inside enrollment section accordion (…

…#436)
tl-its-umich-edu · Apr 22, 2024 · 7aef29e · 7aef29e
1 parent c279e03
commit 7aef29e
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/ccm_web/client/src/components/MultipleSectionEnrollmentWorkflow.tsx b/ccm_web/client/src/components/MultipleSectionEnrollmentWorkflow.tsx
@@ -270,14 +270,16 @@ export default function MultipleSectionEnrollmentWorkflow (props: MultipleSectio
             <Link href={sectionDataToDownload} download='course_section_ids.csv'>
               Download a CSV with the Canvas Course Section IDs data
             </Link>
-            <Accordion title='Course Section Canvas IDs' id='section-ids'>{sectionIdsTable}</Accordion>
+            <Accordion title='Course Section Canvas IDs' id='section-ids'>
+              <Backdrop className={classes.backdrop} open={props.isGetSectionsLoading}>
+                <Grid container>
+                  <Grid item xs={12}><CircularProgress color='inherit' /></Grid>
+                  <Grid item xs={12}>Loading section data from Canvas</Grid>
+                </Grid>
+              </Backdrop>
+              {sectionIdsTable}
+          </Accordion>
           </Grid>
-          <Backdrop className={classes.backdrop} open={props.isGetSectionsLoading}>
-            <Grid container>
-              <Grid item xs={12}><CircularProgress color='inherit' /></Grid>
-              <Grid item xs={12}>Loading section data from Canvas</Grid>
-            </Grid>
-          </Backdrop>
         </Grid>
         <FileUpload onUploadComplete={handleFile} />
         <div className={classes.buttonGroup}>