feat: add loading spinner for updated current job on career chart page (

#785)
openedx · Jul 7, 2023 · 11d2acb · 11d2acb
1 parent 0bfb8a7
commit 11d2acb
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/components/my-career/VisualizeCareer.jsx b/src/components/my-career/VisualizeCareer.jsx
@@ -20,7 +20,7 @@ const VisualizeCareer = ({ jobId, submitClickHandler }) => {
   const [showInstructions, , , toggleShowInstructions] = useToggle(false);
   const [isEditable, setIsEditable] = useState(false);
 
-  const [learnerSkillLevels, learnerSkillLevelsFetchError] = useLearnerSkillLevels(jobId);
+  const [learnerSkillLevels, learnerSkillLevelsFetchError, isLoading] = useLearnerSkillLevels(jobId);
 
   const editOnClickHandler = () => {
     setIsEditable(true);
@@ -44,7 +44,7 @@ const VisualizeCareer = ({ jobId, submitClickHandler }) => {
     return <ErrorPage status={learnerSkillLevelsFetchError.status} />;
   }
 
-  if (!learnerSkillLevels) {
+  if (!learnerSkillLevels || isLoading) {
     return (
       <div className="py-5">
         <LoadingSpinner data-testid="loading-spinner" screenReaderText="Visualize Career Tab" />

diff --git a/src/components/my-career/data/hooks.jsx b/src/components/my-career/data/hooks.jsx
@@ -33,9 +33,11 @@ export function useLearnerProfileData(username) {
 export function useLearnerSkillLevels(jobId) {
   const [learnerSkillLevels, setLearnerSkillLevels] = useState();
   const [fetchError, setFetchError] = useState();
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     const fetchData = async () => {
+      setIsLoading(true);
       if (jobId) {
         try {
           const response = await getLearnerSkillLevels(jobId);
@@ -45,11 +47,12 @@ export function useLearnerSkillLevels(jobId) {
           setFetchError(error);
         }
       }
+      setIsLoading(false);
       return undefined;
     };
     fetchData();
   }, [jobId]);
-  return [camelCaseObject(learnerSkillLevels), fetchError];
+  return [camelCaseObject(learnerSkillLevels), fetchError, isLoading];
 }
 
 export function usePlotlySpiderChart(categories) {