From d0bb6ffbddf1b2d9d63464fd08beb41a072b641a Mon Sep 17 00:00:00 2001
From: Caden Lee <149259302+CadenLee2@users.noreply.github.com>
Date: Mon, 3 Mar 2025 11:14:36 -0800
Subject: [PATCH] Use shared requirements loading icon component (#613)

---
 .../RoadmapPage/sidebar/GERequiredCourseList.tsx     | 10 ++--------
 .../RoadmapPage/sidebar/MajorRequiredCourseList.tsx  | 10 ++--------
 .../RoadmapPage/sidebar/MinorRequiredCourseList.tsx  | 12 ++++--------
 .../RoadmapPage/sidebar/ProgramRequirementsList.scss |  6 ------
 .../RoadmapPage/sidebar/RequirementsLoadingIcon.scss |  5 +++++
 .../RoadmapPage/sidebar/RequirementsLoadingIcon.tsx  | 12 ++++++++++++
 6 files changed, 25 insertions(+), 30 deletions(-)
 create mode 100644 site/src/pages/RoadmapPage/sidebar/RequirementsLoadingIcon.scss
 create mode 100644 site/src/pages/RoadmapPage/sidebar/RequirementsLoadingIcon.tsx

diff --git a/site/src/pages/RoadmapPage/sidebar/GERequiredCourseList.tsx b/site/src/pages/RoadmapPage/sidebar/GERequiredCourseList.tsx
index 2f951c2b..365ad84c 100644
--- 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
index 19adad2c..3d4cf39e 100644
--- 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
index 6f869900..f91831d8 100644
--- 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
index 15ff861b..28cbc1c7 100644
--- 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
new file mode 100644
index 00000000..328e8b16
--- /dev/null
+++ 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
new file mode 100644
index 00000000..b40ea597
--- /dev/null
+++ 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;