diff --git a/site/src/helpers/util.tsx b/site/src/helpers/util.tsx
index 29c38d77..ce889bd6 100644
--- a/site/src/helpers/util.tsx
+++ b/site/src/helpers/util.tsx
@@ -77,33 +77,17 @@ export async function transformGQLData(index: SearchIndex, data: CourseGQLRespon
 }
 
 async function transformCourseGQL(data: CourseGQLResponse) {
-  const instructorHistoryLookup: ProfessorLookup = await
-    axios.post<{ [key: string]: ProfessorGQLResponse }>
-    (`/api/professors/api/batch`, {"professors": data.instructorHistory})
-      .then(r => r.data);
-  const prerequisiteListLookup: CourseLookup = await
-    axios.post<{ [key: string]: CourseGQLResponse }>
-    (`/api/courses/api/batch`, {"courses": data.prerequisiteList.map((x) => x.replace(/ /g, ""))})
-      .then(r => r.data);
-  const prerequisiteForLookup: CourseLookup = await
-    axios.post<{ [key: string]: CourseGQLResponse }>
-    (`/api/courses/api/batch`, {"courses": data.prerequisiteFor.map((x) => x.replace(/ /g, ""))})
-      .then(r => r.data);
    // create copy to override fields with lookups
   const course = { ...data } as unknown as CourseGQLData;
-  course.instructorHistory = instructorHistoryLookup;
-  course.prerequisiteList = prerequisiteListLookup;
-  course.prerequisiteFor = prerequisiteForLookup;
+  course.instructorHistory = Object.fromEntries(data.instructorHistory.map((x) => [x, null!]));
+  course.prerequisiteList = Object.fromEntries(data.prerequisiteList.map((x) => [x, null!]));
+  course.prerequisiteFor = Object.fromEntries(data.prerequisiteFor.map((x) => [x, null!]))
   return course;
 }
 
 async function transformProfessorGQL(data: ProfessorGQLResponse) {
-  const courseHistoryLookup = await axios.post<{ [key: string]: CourseGQLResponse }>
-  (`/api/courses/api/batch`, {"courses": Object.keys(data.courseHistory).map((x) => x.replace(/ /g, ""))})
-    .then(r => Object.fromEntries(Object.values(r.data).map(x => [x.id, x])));
-  // create copy to override fields with lookups
   let professor = { ...data } as unknown as ProfessorGQLData;
-  professor.courseHistory = courseHistoryLookup;
+  professor.courseHistory = Object.fromEntries(Object.entries(data.courseHistory).map(([x, _]) => [x, null!]));
   return professor;
 }
 
diff --git a/site/src/pages/CoursePage/index.tsx b/site/src/pages/CoursePage/index.tsx
index 96c1ef47..8bd4db4c 100644
--- a/site/src/pages/CoursePage/index.tsx
+++ b/site/src/pages/CoursePage/index.tsx
@@ -13,10 +13,12 @@ import Error from '../../component/Error/Error';
 
 import { useAppSelector, useAppDispatch } from '../../store/hooks';
 import { setCourse } from '../../store/slices/popupSlice';
-import { SearchType, SearchIndex, CourseGQLData } from '../../types/types';
+import { CourseGQLData } from '../../types/types';
 import { getCourseTags, searchAPIResult } from '../../helpers/util';
 import './CoursePage.scss';
 
+import axios from "axios";
+
 const CoursePage: FC<RouteComponentProps<{ id: string }>> = (props) => {
     const dispatch = useAppDispatch();
     const courseGQLData = useAppSelector(state => state.popup.course);
@@ -24,18 +26,33 @@ const CoursePage: FC<RouteComponentProps<{ id: string }>> = (props) => {
 
     useEffect(() => {
         // make a gql query if directly landed on this page
-        if (courseGQLData == null || courseGQLData.id != props.match.params.id) {
-            searchAPIResult('course', props.match.params.id)
+        if (courseGQLData == null || courseGQLData.id !== props.match.params.id) {
+            (searchAPIResult('course', props.match.params.id) as Promise<CourseGQLData>)
                 .then(course => {
-                    console.log("COURSE", course)
                     if (course) {
-                        dispatch(setCourse(course as CourseGQLData))
+                        Promise.all([
+                            axios.post
+                            (`/api/professors/api/batch`, {"professors": Object.keys(course.instructorHistory)})
+                                .then(r => r.data),
+                            axios.post
+                            (`/api/courses/api/batch`, {"courses": Object.keys(course.prerequisiteList).map((x) => x.replace(/ /g, ""))})
+                                .then(r => r.data),
+                            axios.post
+                            (`/api/courses/api/batch`, {"courses": Object.keys(course.prerequisiteFor).map((x) => x.replace(/ /g, ""))})
+                                .then(r => r.data),
+                        ]).then(([instructorHistory, prerequisiteList, prerequisiteFor]) => {
+                            course.instructorHistory = instructorHistory;
+                            course.prerequisiteList = prerequisiteList;
+                            course.prerequisiteFor = prerequisiteFor;
+                            dispatch(setCourse(course));
+                        })
                     }
                     else {
                         setError(`Course ${props.match.params.id} does not exist!`);
                     }
                 })
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     // if course does not exists
diff --git a/site/src/pages/ProfessorPage/index.tsx b/site/src/pages/ProfessorPage/index.tsx
index 11805b7f..b396c053 100644
--- a/site/src/pages/ProfessorPage/index.tsx
+++ b/site/src/pages/ProfessorPage/index.tsx
@@ -13,7 +13,7 @@ import Error from '../../component/Error/Error';
 
 import { setProfessor } from '../../store/slices/popupSlice';
 import { useAppSelector, useAppDispatch } from '../../store/hooks';
-import { ProfessorGQLData } from '../../types/types';
+import {CourseGQLResponse, ProfessorGQLData} from '../../types/types';
 import { searchAPIResult } from '../../helpers/util';
 
 const ProfessorPage: FC<RouteComponentProps<{ id: string }>> = (props) => {
@@ -23,17 +23,23 @@ const ProfessorPage: FC<RouteComponentProps<{ id: string }>> = (props) => {
 
     useEffect(() => {
         // make a gql query if directly landed on this page
-        if (professorGQLData == null || professorGQLData.ucinetid != props.match.params.id) {
-            searchAPIResult('professor', props.match.params.id)
+        if (professorGQLData == null || professorGQLData.ucinetid !== props.match.params.id) {
+            (searchAPIResult('professor', props.match.params.id) as Promise<ProfessorGQLData>)
                 .then(professor => {
                     if (professor) {
-                        dispatch(setProfessor(professor as ProfessorGQLData))
+                        axios.post<{ [key: string]: CourseGQLResponse }>
+                        (`/api/courses/api/batch`, {"courses": Object.keys(professor.courseHistory).map((x) => x.replace(/ /g, ""))})
+                            .then(r => {
+                                professor.courseHistory = Object.fromEntries(Object.values(r.data).map(x => [x.id, x]));
+                                dispatch(setProfessor(professor));
+                            })
                     }
                     else {
                         setError(`Professor ${props.match.params.id} does not exist!`);
                     }
                 })
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     // if professor does not exists