PROD-3234 Add Spinner while Header Loads -> PROD-3115_uni-nav

src-ts/App.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FC, ReactElement, SetStateAction, useContext, useEffect, useState } from 'react'
+import { FC, ReactElement, useContext } from 'react'
 import { Routes } from 'react-router-dom'
 import { toast, ToastContainer } from 'react-toastify'
 
@@ -7,22 +7,11 @@ import { routeContext, RouteContextData } from './lib'
 
 const App: FC<{}> = () => {
 
-    const [ready, setReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
     const { allRoutes, getRouteElement }: RouteContextData = useContext(routeContext)
 
     const routeElements: Array<ReactElement> = allRoutes
         .map(route => getRouteElement(route))
 
-    useEffect(() => {
-        setReady(true)
-    }, [])
-
-    useEffect(() => {
-        if (ready) {
-            document.getElementById('root')?.classList.add('app-ready');
-        }
-    }, [ready]);
-
     return (
         <>
             <Header />

src-ts/config/constants.ts

@@ -6,4 +6,4 @@ export enum ToolTitle {
     work = 'Self-Service',
 }
 
-export const PagePortalId: string = 'page-subheader-portal-el'
+export const PageSubheaderPortalId: string = 'page-subheader-portal-el'

src-ts/header/Header.tsx

@@ -10,11 +10,12 @@ import {
 } from 'react'
 import classNames from 'classnames'
 
-import { EnvironmentConfig, PagePortalId } from '../config'
+import { EnvironmentConfig, PageSubheaderPortalId } from '../config'
 import {
     authUrlLogin,
     authUrlLogout,
     authUrlSignup,
+    LoadingSpinner,
     profileContext,
     ProfileContextData,
     routeContext,
@@ -29,7 +30,7 @@ UniNavSnippet(EnvironmentConfig.UNIVERSAL_NAV.URL)
 
 const Header: FC = () => {
 
-    const { activeToolName }: RouteContextData = useContext(routeContext)
+    const { activeToolName, activeToolRoute }: RouteContextData = useContext(routeContext)
     const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext)
     const [ready, setReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
     const headerInit: MutableRefObject<boolean> = useRef(false)
@@ -44,7 +45,7 @@ const Header: FC = () => {
         headerInit.current = true
 
         tcUniNav(
-            'tool',
+            'init',
             navElementId,
             {
                 onReady() {
@@ -55,6 +56,8 @@ const Header: FC = () => {
                 signOut() { window.location.href = authUrlLogout },
                 signUp() { window.location.href = authUrlSignup() },
                 toolName: activeToolName,
+                toolRoute: activeToolRoute,
+                type: 'tool',
                 user: profileReady && profile ? {
                     handle: profile.handle,
                     initials: `${profile.firstName.charAt(0)}${profile.lastName.charAt(0)}`,
@@ -65,15 +68,18 @@ const Header: FC = () => {
         )
     }, [
         activeToolName,
+        activeToolRoute,
         profileReady,
-        profile])
+        profile,
+    ])
 
     return (
         <>
+            <LoadingSpinner hide={ready} />
             <div id={navElementId} />
             <div
-                id={PagePortalId}
-                className={classNames('full-width-relative', !ready && 'hidden')}
+                id={PageSubheaderPortalId}
+                className={classNames('full-width-relative')}
             />
         </>
     )

src-ts/lib/breadcrumb/Breadcrumb.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { createPortal } from 'react-dom'
 
-import { PagePortalId } from '../../config'
+import { PageSubheaderPortalId } from '../../config'
 
 import { BreadcrumbItem, BreadcrumbItemModel } from './breadcrumb-item'
 import styles from './Breadcrumb.module.scss'
@@ -11,7 +11,7 @@ interface BreadcrumbProps {
 }
 
 const Breadcrumb: FC<BreadcrumbProps> = (props: BreadcrumbProps) => {
-    const portalRootEl: HTMLElement | null = document.getElementById(PagePortalId)
+    const portalRootEl: HTMLElement | null = document.getElementById(PageSubheaderPortalId)
 
     if (!portalRootEl) {
         return <></>

src-ts/lib/route-provider/route-context-data.model.ts

@@ -4,6 +4,7 @@ import { PlatformRoute } from './platform-route.model'
 
 export interface RouteContextData {
     activeToolName?: string
+    activeToolRoute?: string
     allRoutes: Array<PlatformRoute>
     getChildren: (parent: string) => Array<PlatformRoute>
     getChildRoutes: (parent: string) => Array<ReactElement>

src-ts/lib/route-provider/route.provider.tsx

@@ -55,16 +55,25 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
         //    a. for customers and the user is a customer
         //    b. for members and the user is a member
         //    c. the active tool in the app (in case someone deep-links to it)
+        let activeRoute: PlatformRoute | undefined
         const toolsRoutesForNav: Array<PlatformRoute> = toolsRoutes
-            .filter(route => !!route.title
-                && !route.hidden
-                && (
-                    (
-                        (!route.customerOnly || !!profile?.isCustomer)
-                        && (!route.memberOnly || !!profile?.isMember)
+            .filter(route => {
+
+                const isActive: boolean = routeIsActiveTool(location.pathname, route)
+                if (isActive) {
+                    activeRoute = route
+                }
+
+                return !!route.title
+                    && !route.hidden
+                    && (
+                        (
+                            (!route.customerOnly || !!profile?.isCustomer)
+                            && (!route.memberOnly || !!profile?.isMember)
+                        )
+                        || isActive
                     )
-                    || routeIsActiveTool(location.pathname, route)
-                ))
+            })
 
         const utilsRoutes: Array<PlatformRoute> = props.utilsRoutes.filter(route => !route.disabled)
         allRoutes = [
@@ -77,8 +86,10 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
             : profile.isCustomer
                 ? props.rootCustomer
                 : props.rootMember
+
         const contextData: RouteContextData = {
-            activeToolName: allRoutes.find(r => routeIsActiveTool(location.pathname, r))?.title,
+            activeToolName: activeRoute?.title,
+            activeToolRoute: !!activeRoute ? `https://${window.location.hostname}${activeRoute.route}` : undefined,
             allRoutes,
             getChildren,
             getChildRoutes,

src-ts/tools/learn/my-learning/MyLearning.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, FC, ReactNode, SetStateAction, useContext, useMemo, useState } from 'react'
 
-import { PagePortalId } from '../../../config'
+import { PageSubheaderPortalId } from '../../../config'
 import {
     Breadcrumb,
     BreadcrumbItemModel,
@@ -83,7 +83,7 @@ const MyLearning: FC<{}> = () => {
             <div className={styles.wrap}>
                 <LoadingSpinner hide={ready} className={styles['loading-spinner']} />
 
-                <Portal portalId={PagePortalId}>
+                <Portal portalId={PageSubheaderPortalId}>
                     <div className={styles['hero-wrap']}>
                         <WaveHero
                             title='my learning'

src-ts/tools/learn/welcome/WelcomePage.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import classNames from 'classnames'
 
-import { PagePortalId } from '../../../config'
+import { PageSubheaderPortalId } from '../../../config'
 import { ContentLayout, LoadingSpinner, Portal } from '../../../lib'
 import {
     AllCertificationsProviderData,
@@ -29,7 +29,7 @@ const WelcomePage: FC = () => {
 
             <div className={classNames(styles.wrap, 'full-height-frame')}>
 
-                <Portal portalId={PagePortalId}>
+                <Portal portalId={PageSubheaderPortalId}>
                     <div className={styles['hero-wrap']}>
                         <WaveHero
                             title={(