Move things around, make the navigation calculation run in seperate thread

src/js/App/Header/Header.js

@@ -0,0 +1,26 @@
+import React, { Fragment } from 'react';
+import Brand from './Brand';
+import Tools from './Tools';
+import UnAuthtedHeader from './UnAuthtedHeader';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+const Header = ({ user }) => {
+    return user ? (
+        <Fragment>
+            <Brand />
+            <Tools />
+        </Fragment>
+    ) : <UnAuthtedHeader />;
+};
+
+Header.propTypes = {
+    user: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.shape({
+            [PropTypes.string]: PropTypes.any
+        })
+    ])
+};
+
+export default connect(({ chrome: { user } }) => ({ user }))(Header);

src/js/App/Header/HeaderTests/Header.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import toJson from 'enzyme-to-json';
+import { shallow, mount } from 'enzyme';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+import Header from '../Header';
+import UnauthedHeader from '../UnAuthtedHeader';
+
+describe('Header', () => {
+    let initialState;
+    let mockStore;
+
+    beforeEach(() =>{
+        mockStore = configureStore();
+        initialState = ({ chrome: {
+            activeTechnology: 'someTechnology',
+            activeLocation: 'someLocation'
+        } });
+    });
+    it('should render correctly', () => {
+        const store = mockStore(initialState);
+        const wrapper = mount(<Provider store={store}>
+            <Header currentApp='Red Hat Insights'/>
+        </Provider>);
+        expect(toJson(wrapper, { mode: 'deep' })).toMatchSnapshot();
+    });
+});
+
+describe('unauthed', () => {
+    it('should render correctly', () => {
+        const wrapper = shallow(<UnauthedHeader/>);
+        expect(toJson(wrapper)).toMatchSnapshot();
+    });
+});

src/js/App/Header/HeaderTests/__snapshots__/Header.test.js.snap

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header should render correctly 1`] = `
+<Connect(Header)
+  currentApp="Red Hat Insights"
+>
+  Array [
+    <Connect(Brand)>
+      <div
+        className="pf-c-page__header-brand"
+      >
+        <div
+          className="pf-c-page__header-brand-toggle"
+        >
+          <button
+            aria-disabled={false}
+            aria-label="Toggle primary navigation"
+            className="pf-c-button pf-m-plain"
+            data-ouia-component-id={0}
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe={true}
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+            widget-type="InsightsNavToggle"
+          >
+            <svg
+              aria-hidden={true}
+              aria-labelledby={null}
+              fill="currentColor"
+              height="1.5em"
+              role="img"
+              style={
+                Object {
+                  "verticalAlign": "-0.1875em",
+                }
+              }
+              viewBox="0 0 448 512"
+              width="1.5em"
+            >
+              <path
+                d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
+                transform=""
+              />
+            </svg>
+          </button>
+        </div>
+        <a
+          className="pf-c-page__header-brand-link"
+          href="./"
+        >
+          <img
+            alt="Red Hat Logo"
+            src="test-file-stub"
+          />
+        </a>
+      </div>
+    </Connect(Brand)>,
+    <div
+      className="pf-c-page__header-tools"
+    >
+      <button
+        aria-disabled={false}
+        aria-label="Toggle primary navigation"
+        className="pf-c-button pf-m-tertiary"
+        data-ouia-component-id={1}
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe={true}
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+        widget-type="InsightsNavToggle"
+      >
+        Log in
+      </button>
+    </div>,
+    "",
+  ]
+</Connect(Header)>
+`;
+
+exports[`unauthed should render correctly 1`] = `
+<Fragment>
+  <Connect(Brand) />
+  <Login />
+  <LogoutAlert />
+</Fragment>
+`;

src/js/App/Header/index.js

@@ -1,13 +1,24 @@
-import React, { Fragment } from 'react';
-import Brand from './Brand';
-import Tools from './Tools';
+import React, { lazy, Suspense, Fragment } from 'react';
+import { Provider } from 'react-redux';
+import { render } from 'react-dom';
+import { spinUpStore } from '../../redux-config';
 
-const Header = () => {
-    return (
-        <Fragment>
-            <Brand />
-            <Tools />
-        </Fragment>
-    );};
+const Header = lazy(() => import(/* webpackChunkName: "Sidenav" */ './Header'));
 
-export default Header;
+export const headerLoader = () => {
+    const { store } = spinUpStore();
+    if (document.querySelector('header')) {
+        render(
+            <Provider store={store}>
+                <Suspense fallback={<Fragment />}>
+                    <Header />
+                </Suspense>
+            </Provider>,
+            document.querySelector('header')
+        );
+    }
+
+    if (window.insights.chrome.isPenTest()) {
+        document.querySelector('header').classList.add('ins-c-pen-test');
+    }
+};

src/js/App/Sidenav/AppSwitcher.js

@@ -39,7 +39,7 @@ const AppSwitcher = ({ currentApp }) => {
     };
 
     return (
-        <section className='ins-c-app-switcher'>
+        <section className="ins-c-app-switcher">
             <Dropdown
                 isPlain
                 className='ins-c-app-switcher__dropdown'

src/js/App/Sidenav/AppSwitcher.test.js

@@ -1,12 +1,25 @@
 import React from 'react';
 import toJson from 'enzyme-to-json';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
 import AppSwitcher from './AppSwitcher';
 
 describe('AppSwitcher', () => {
-
+    let initialState;
+    let mockStore;
+    beforeEach(() =>{
+        mockStore = configureStore();
+        initialState = ({ chrome: {
+            activeTechnology: 'someTechnology',
+            activeLocation: 'someLocation'
+        } });
+    });
     it('should render correctly', () =>{
-        const wrapper = shallow(<AppSwitcher currentApp='Red Hat Insights'/>);
-        expect(toJson(wrapper)).toMatchSnapshot();
+        const store = mockStore(initialState);
+        const wrapper = mount(<Provider store={store}>
+            <AppSwitcher currentApp='Red Hat Insights'/>
+        </Provider>);
+        expect(toJson(wrapper, { mode: 'deep' })).toMatchSnapshot();
     });
 });

src/js/App/Sidenav/Loader.js

@@ -0,0 +1,26 @@
+import React, { Fragment } from 'react';
+import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components/components/cjs/Skeleton';
+import { Nav } from '@patternfly/react-core/dist/js/components/Nav/Nav';
+import  { NavList } from '@patternfly/react-core/dist/js/components/Nav/NavList';
+import NavigationItem from './NavigationItem';
+
+const NavLoader = () => (
+    <Fragment>
+        <section className={'ins-c-app-switcher--loading'}>
+            <Skeleton size={SkeletonSize.lg} className="ins-m-dark"/>
+        </section>
+        <Nav aria-label="Insights Global Navigation" data-ouia-safe="false">
+            <NavList>
+                {[...new Array(4)].map((_i, key) => (
+                    <NavigationItem
+                        key={key}
+                        title={<a className="ins-c-skeleton__link">
+                            <Skeleton size={SkeletonSize.lg} className="ins-m-dark"/>
+                        </a>}
+                    />))}
+            </NavList>
+        </Nav>
+    </Fragment>
+);
+
+export default NavLoader;