diff --git a/src/components/my-career/VisualizeCareer.jsx b/src/components/my-career/VisualizeCareer.jsx
index f561f2dd2f..3e7584a1d1 100644
--- 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 ;
}
- if (!learnerSkillLevels) {
+ if (!learnerSkillLevels || isLoading) {
return (
diff --git a/src/components/my-career/data/hooks.jsx b/src/components/my-career/data/hooks.jsx
index ff4ef3c054..94ecf00dbf 100644
--- 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) {