Merge pull request #420 from topcoder-platform/TCA-642_delay-header-footer-rendering

TCA-642 - delay the rendering for the header and footer elements -> dev

Author: vas3a

src-ts/App.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactElement, useContext } from 'react'
+import { Dispatch, FC, ReactElement, SetStateAction, useContext, useEffect, useState } from 'react'
 import { Routes } from 'react-router-dom'
 import { toast, ToastContainer } from 'react-toastify'
 
@@ -7,11 +7,22 @@ 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/header/Header.module.scss

@@ -3,6 +3,10 @@
 .header-wrap {
     display: block;
     background-color: $tc-black;
+
+    :global(#root:not(.app-ready)) & {
+        display: none;
+    }
 }
 
 .header {

src-ts/lib/page-footer/PageFooter.module.scss

@@ -4,6 +4,10 @@
 .footer-wrap {
     height: $footer-height;
     border-top: $border-xs solid $black-10;
+
+    :global(#root:not(.app-ready)) & {
+        display: none;
+    }
 }
 
 .footer-inner {
@@ -37,7 +41,7 @@
     @include ltesm {
         flex-direction: column;
         gap: $space-sm;
-        
+
         > div > * + * {
             margin-left: $space-sm;
         }