From e8ccb539771d137ffeb26bb4eb81256a7b28b5be Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Thu, 10 Nov 2022 11:23:11 +0200
Subject: [PATCH] TCA-642 - delay the rendering for the header and footer
 elements, wait for the router to load

---
 src-ts/App.tsx                                | 13 ++++++++++++-
 src-ts/header/Header.module.scss              |  4 ++++
 src-ts/lib/page-footer/PageFooter.module.scss |  6 +++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src-ts/App.tsx b/src-ts/App.tsx
index 10e9900f5..ce3dad70d 100644
--- a/src-ts/App.tsx
+++ b/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 />
diff --git a/src-ts/header/Header.module.scss b/src-ts/header/Header.module.scss
index d65fe3953..798dbf383 100644
--- a/src-ts/header/Header.module.scss
+++ b/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 {
diff --git a/src-ts/lib/page-footer/PageFooter.module.scss b/src-ts/lib/page-footer/PageFooter.module.scss
index fb4a99792..2c2f8596c 100644
--- a/src-ts/lib/page-footer/PageFooter.module.scss
+++ b/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;
         }