fix(project): fix header content shift due to image load

src/components/Header/Header.tsx

@@ -35,6 +35,7 @@ const Header: React.FC<Props> = ({
 }) => {
   const { t } = useTranslation('menu');
   const [mobileSearchActive, setMobileSearchActive] = useState(false);
+  const [logoLoaded, setLogoLoaded] = useState(false);
   const breakpoint = useBreakpoint();
   const headerClassName = classNames(styles.header, styles[headerType], {
     [styles.mobileSearchActive]: mobileSearchActive && breakpoint <= Breakpoint.sm,
@@ -78,11 +79,11 @@ const Header: React.FC<Props> = ({
         </div>
         {logoSrc && (
           <div className={styles.brand}>
-            <Logo src={logoSrc} />
+            <Logo src={logoSrc} onLoad={() => setLogoLoaded(true)} />
           </div>
         )}
         <nav className={styles.nav} aria-label="menu">
-          {children}
+          {logoLoaded ? children : null}
         </nav>
         <div className={styles.search}>{searchEnabled ? search : null}</div>
       </div>

src/components/Header/__snapshots__/Header.test.tsx.snap

@@ -39,17 +39,7 @@ exports[`<Header /> renders header 1`] = `
       <nav
         aria-label="menu"
         class="nav"
-      >
-        <a
-          aria-current="page"
-          class="button default outlined active"
-          href="/"
-        >
-          <span>
-            Home
-          </span>
-        </a>
-      </nav>
+      />
       <div
         class="search"
       >

src/components/Layout/__snapshots__/Layout.test.tsx.snap

@@ -45,17 +45,7 @@ exports[`<Layout /> renders layout 1`] = `
           <nav
             aria-label="menu"
             class="nav"
-          >
-            <a
-              aria-current="page"
-              class="button default text active"
-              href="/"
-            >
-              <span>
-                home
-              </span>
-            </a>
-          </nav>
+          />
           <div
             class="search"
           />

src/components/Logo/Logo.test.tsx

@@ -1,13 +1,32 @@
 import React from 'react';
+import { fireEvent } from '@testing-library/react';
 
 import { render } from '../../testUtils';
 
 import Logo from './Logo';
 
 describe('<Logo/>', () => {
   it('renders and matches snapshot', () => {
-    const { container } = render(<Logo src="123" />);
+    const { container } = render(<Logo src="123" onLoad={jest.fn()} />);
 
     expect(container).toMatchSnapshot();
   });
+
+  it('calls the onLoad function after the image has been loaded', () => {
+    const onLoad = jest.fn();
+    const { getByAltText } = render(<Logo src="testimage" onLoad={onLoad} />);
+
+    fireEvent.load(getByAltText('logo'));
+
+    expect(onLoad).toBeCalledTimes(1);
+  });
+
+  it('calls the onLoad function when the image fails to load', () => {
+    const onLoad = jest.fn();
+    const { getByAltText } = render(<Logo src="testimage" onLoad={onLoad} />);
+
+    fireEvent.error(getByAltText('logo'));
+
+    expect(onLoad).toBeCalledTimes(1);
+  });
 });

src/components/Logo/Logo.tsx

@@ -5,12 +5,13 @@ import styles from './Logo.module.scss';
 
 type Props = {
   src: string;
+  onLoad: () => void;
 };
 
-const Logo: React.FC<Props> = ({ src }: Props) => {
+const Logo: React.FC<Props> = ({ src, onLoad }: Props) => {
   return (
     <Link to="/">
-      <img className={styles.logo} alt="logo" src={src} />
+      <img className={styles.logo} alt="logo" src={src} onLoad={onLoad} onError={onLoad} />
     </Link>
   );
 };

src/components/Root/__snapshots__/Root.test.tsx.snap

@@ -45,16 +45,7 @@ exports[`<Root /> renders and matches snapshot 1`] = `
           <nav
             aria-label="menu"
             class="nav"
-          >
-            <a
-              class="button default text"
-              href="/"
-            >
-              <span>
-                home
-              </span>
-            </a>
-          </nav>
+          />
           <div
             class="search"
           />