Use shared requirements loading icon component (#613)

icssc · Mar 3, 2025 · d0bb6ff · d0bb6ff
1 parent d6cbb2d
commit d0bb6ff
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 30 deletions.
diff --git a/site/src/pages/RoadmapPage/sidebar/GERequiredCourseList.tsx b/site/src/pages/RoadmapPage/sidebar/GERequiredCourseList.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ProgramRequirementsList from './ProgramRequirementsList';
 import trpc from '../../../trpc';
-import { Spinner } from 'react-bootstrap';
+import RequirementsLoadingIcon from './RequirementsLoadingIcon';
 import { setGERequirements } from '../../../store/slices/courseRequirementsSlice';
 import { useAppDispatch, useAppSelector } from '../../../store/hooks';
 
@@ -27,13 +27,7 @@ const GERequiredCourseList: FC = () => {
     });
   }, [dispatch, requirements]);
 
-  const loadingIcon = (
-    <div className="requirements-loading">
-      <Spinner animation="border" />
-    </div>
-  );
-
-  return <>{resultsLoading ? loadingIcon : <ProgramRequirementsList requirements={requirements} />}</>;
+  return <>{resultsLoading ? <RequirementsLoadingIcon /> : <ProgramRequirementsList requirements={requirements} />}</>;
 };
 
 export default GERequiredCourseList;
diff --git a/site/src/pages/RoadmapPage/sidebar/MajorRequiredCourseList.tsx b/site/src/pages/RoadmapPage/sidebar/MajorRequiredCourseList.tsx
@@ -3,7 +3,7 @@ import ProgramRequirementsList from './ProgramRequirementsList';
 import Select from 'react-select';
 import trpc from '../../../trpc';
 import { normalizeMajorName, comboboxTheme } from '../../../helpers/courseRequirements';
-import { Spinner } from 'react-bootstrap';
+import RequirementsLoadingIcon from './RequirementsLoadingIcon';
 import {
   setMajor,
   setMajorList,
@@ -173,12 +173,6 @@ const MajorRequiredCourseList: FC = () => {
 
   const specSelectOptions = specializations.map((s) => ({ value: s, label: s.name }));
 
-  const loadingIcon = (
-    <div className="requirements-loading">
-      <Spinner animation="border" />
-    </div>
-  );
-
   return (
     <>
       <Select
@@ -220,7 +214,7 @@ const MajorRequiredCourseList: FC = () => {
         />
       )}
       {selectedMajor && (!selectedMajor.specializations.length || selectedSpec) && (
-        <>{resultsLoading ? loadingIcon : <ProgramRequirementsList requirements={requirements} />}</>
+        <>{resultsLoading ? <RequirementsLoadingIcon /> : <ProgramRequirementsList requirements={requirements} />}</>
       )}
     </>
   );

diff --git a/site/src/pages/RoadmapPage/sidebar/MinorRequiredCourseList.tsx b/site/src/pages/RoadmapPage/sidebar/MinorRequiredCourseList.tsx
@@ -3,7 +3,7 @@ import ProgramRequirementsList from './ProgramRequirementsList';
 import Select from 'react-select';
 import trpc from '../../../trpc';
 import { normalizeMajorName, comboboxTheme } from '../../../helpers/courseRequirements';
-import { Spinner } from 'react-bootstrap';
+import RequirementsLoadingIcon from './RequirementsLoadingIcon';
 import { setMinorRequirements, setMinor, setMinorList } from '../../../store/slices/courseRequirementsSlice';
 import { useAppDispatch, useAppSelector } from '../../../store/hooks';
 import ThemeContext from '../../../style/theme-context';
@@ -88,12 +88,6 @@ const MinorRequiredCourseList: FC = () => {
     label: `${m.name}`,
   }));
 
-  const loadingIcon = (
-    <div className="requirements-loading">
-      <Spinner animation="border" />
-    </div>
-  );
-
   return (
     <>
       <Select
@@ -112,7 +106,9 @@ const MinorRequiredCourseList: FC = () => {
         placeholder="Select a minor..."
         theme={(t) => comboboxTheme(t, isDark)}
       />
-      {selectedMinor && <>{resultsLoading ? loadingIcon : <ProgramRequirementsList requirements={requirements} />}</>}
+      {selectedMinor && (
+        <>{resultsLoading ? <RequirementsLoadingIcon /> : <ProgramRequirementsList requirements={requirements} />}</>
+      )}
     </>
   );
 };

diff --git a/site/src/pages/RoadmapPage/sidebar/ProgramRequirementsList.scss b/site/src/pages/RoadmapPage/sidebar/ProgramRequirementsList.scss
@@ -140,9 +140,3 @@ body[data-theme='dark'] {
     overflow: hidden;
   }
 }
-
-.search-sidebar .requirements-loading {
-  display: flex;
-  justify-content: center;
-  margin: 8px auto;
-}
diff --git a/site/src/pages/RoadmapPage/sidebar/RequirementsLoadingIcon.scss b/site/src/pages/RoadmapPage/sidebar/RequirementsLoadingIcon.scss
@@ -0,0 +1,5 @@
+.requirements-loading {
+  display: flex;
+  justify-content: center;
+  margin: 8px auto;
+}
diff --git a/site/src/pages/RoadmapPage/sidebar/RequirementsLoadingIcon.tsx b/site/src/pages/RoadmapPage/sidebar/RequirementsLoadingIcon.tsx
@@ -0,0 +1,12 @@
+import './RequirementsLoadingIcon.scss';
+import { Spinner } from 'react-bootstrap';
+
+const RequirementsLoadingIcon = () => {
+  return (
+    <div className="requirements-loading">
+      <Spinner animation="border" />
+    </div>
+  );
+};
+
+export default RequirementsLoadingIcon;