Reduce home page flickering show relevant content only

api-specs/api/examples/ProductSelection/ProductSelectionExcludeProductAction.json

@@ -5,8 +5,6 @@
     "key": "millennium-falcon"
   },
   "variantExclusion": {
-    "skus": [
-      "metallic-white"
-    ]
+    "skus": ["metallic-white"]
   }
 }

api-specs/api/examples/b2b-cart.example.json

@@ -105,6 +105,6 @@
   "origin": "Customer",
   "shipping": [],
   "shippingMode": "Single",
-  "itemShippingAddresses" : [],
+  "itemShippingAddresses": [],
   "directDiscounts": []
 }

api-specs/api/examples/b2b-carts.example.json

@@ -111,9 +111,8 @@
       "origin": "Customer",
       "shipping": [],
       "shippingMode": "Single",
-      "itemShippingAddresses" : [],
+      "itemShippingAddresses": [],
       "directDiscounts": []
     }
-
   ]
 }

packages/gatsby-theme-learning/src/components/course-complete-modal.tsx

@@ -57,8 +57,14 @@ const CourseCompleteModal = (props: CourseCompleteModalProps) => {
   const { isModalOpen, openModal, closeModal } = useModalState();
   const { data } = useFetchCourseDetails(props.courseId);
   const { isClientSide } = useIsClientSide();
+  const [goToUrl, setGoToUrl] = useState<string>('/');
   const courseInfo = useOrderedCoursesInfo();
-  const goToUrl = getNextUnfinishedCoursePath(courseInfo, props.courseId);
+
+  useEffect(() => {
+    if (courseInfo) {
+      setGoToUrl(getNextUnfinishedCoursePath(courseInfo, props.courseId));
+    }
+  }, [courseInfo, props.courseId]);
 
   useEffect(() => {
     if (goToUrl === '/') {
@@ -89,7 +95,6 @@ const CourseCompleteModal = (props: CourseCompleteModalProps) => {
 
   const onConfirmHandler = (e: SyntheticEvent<Element, Event>) => {
     e.preventDefault();
-    const goToUrl = getNextUnfinishedCoursePath(courseInfo, props.courseId);
     closeModal();
     navigate(goToUrl);
   };

packages/gatsby-theme-learning/src/components/if-learning-path.tsx

@@ -15,33 +15,33 @@ type IfLearningPathCompleteProps = {
 };
 
 export const IfLearningPathComplete = (props: IfLearningPathCompleteProps) => {
-  const { isAuthenticated } = useAuth0();
+  const { isAuthenticated, isLoading } = useAuth0();
   const [isVisible, setIsVisible] = useState<boolean>(false);
   const courseInfo = useOrderedCoursesInfo();
   useEffect(() => {
-    if (isAuthenticated && courseInfo) {
+    if (!isLoading && isAuthenticated && courseInfo) {
       const incompleteCourse = courseInfo.find(
         (course) => course.status !== 'completed'
       );
       !incompleteCourse ? setIsVisible(true) : setIsVisible(false);
     }
-  }, [isAuthenticated, courseInfo]);
+  }, [isAuthenticated, courseInfo, isLoading]);
   return isAuthenticated && isVisible ? content(props.children) : null;
 };
 
 export const IfLearningPathNotComplete = (
   props: IfLearningPathCompleteProps
 ) => {
-  const { isAuthenticated } = useAuth0();
-  const [isVisible, setIsVisible] = useState<boolean>(true);
+  const { isAuthenticated, isLoading } = useAuth0();
+  const [isVisible, setIsVisible] = useState<boolean>(false);
   const courseInfo = useOrderedCoursesInfo();
   useEffect(() => {
-    if (isAuthenticated && courseInfo) {
+    if (!isLoading && isAuthenticated && courseInfo) {
       const incompleteCourse = courseInfo.find(
         (course) => course.status !== 'completed'
       );
       !incompleteCourse ? setIsVisible(false) : setIsVisible(true);
     }
-  }, [isAuthenticated, courseInfo]);
+  }, [isAuthenticated, courseInfo, isLoading]);
   return isAuthenticated && isVisible ? content(props.children) : null;
 };

packages/gatsby-theme-learning/src/components/if-user-logged.tsx

@@ -32,6 +32,8 @@ export const IfUserLoggedOut = (props: IsLoggedOutProps) => {
   const { isAuthenticated, isLoading } = useAuth0();
   if (isLoading && props.assumeTrue) {
     return content(props.children);
+  } else if (isLoading) {
+    return null;
   } else {
     return !isAuthenticated ? content(props.children) : null;
   }

packages/gatsby-theme-learning/src/hooks/use-course-pages.ts

@@ -3,6 +3,7 @@ import {
   useFetchCourses,
   getCourseStatusByCourseId,
 } from './use-course-status';
+import { useEffect, useState } from 'react';
 
 type CoursePageNode = {
   slug: string;
@@ -101,29 +102,40 @@ export type OrderedCoursesInfo = {
 
 /**
  * Returns an array of objects matching the course order defined in the navigation.
- * Each object has 2 properties: courseId and pages (the list of topics pages with the same order as
- * defined in navigation.yaml)
+ * Each object has 3 properties: courseId, pages (the list of topics pages with the same order as
+ * defined in navigation.yaml) and status
  */
-export const useOrderedCoursesInfo = (): OrderedCoursesInfo[] => {
+export const useOrderedCoursesInfo = (): OrderedCoursesInfo[] | undefined => {
   const coursePageData = useCoursePages();
-  const { data } = useFetchCourses();
+  const { data, isLoading } = useFetchCourses();
+  const [orderedCoursesInfo, setOrderedCourseInfo] = useState<
+    OrderedCoursesInfo[] | undefined
+  >();
   courseMapToPages(coursePageData);
   const navigationData = coursePageData.allNavigationYaml;
   const coursesOnlyNavData = navigationData.nodes.filter((navElement) => {
     return navElement.pages.find((navElementPage) =>
       coursePageMap.has(navElementPage.path)
     );
   });
-  const orderedCorusesInfo = coursesOnlyNavData.map((navData) => {
-    const firstPageSlug = navData.pages[0].path;
-    const courseId = coursePageMap.get(firstPageSlug)?.courseId || 0;
-    return {
-      courseId,
-      pages: navData.pages,
-      status: data?.result.enrolledCourses
-        ? getCourseStatusByCourseId(data.result.enrolledCourses, courseId)
-        : '',
-    };
-  });
-  return orderedCorusesInfo;
+  useEffect(() => {
+    if (!isLoading && data) {
+      setOrderedCourseInfo(
+        coursesOnlyNavData.map((navData) => {
+          const firstPageSlug = navData.pages[0].path;
+          const courseId = coursePageMap.get(firstPageSlug)?.courseId || 0;
+          return {
+            courseId,
+            pages: navData.pages,
+            status: getCourseStatusByCourseId(
+              data.result.enrolledCourses,
+              courseId
+            ),
+          };
+        })
+      );
+    }
+  }, [data, isLoading, coursesOnlyNavData]);
+
+  return orderedCoursesInfo;
 };