diff --git a/package.json b/package.json
index 7327b3e2a..a10c007aa 100644
--- a/package.json
+++ b/package.json
@@ -82,8 +82,8 @@
"@patternfly/react-icons": "4.4.2",
"@patternfly/react-styles": "4.4.2",
"@patternfly/react-tokens": "4.5.2",
- "@redhat-cloud-services/frontend-components": "2.1.1",
- "@redhat-cloud-services/frontend-components-notifications": "2.1.0",
+ "@redhat-cloud-services/frontend-components": "2.1.3",
+ "@redhat-cloud-services/frontend-components-notifications": "2.1.1",
"@redhat-cloud-services/frontend-components-utilities": "2.1.0",
"axios": "^0.19.2",
"c3": "^0.7.15",
diff --git a/src/components/router/__tests__/__snapshots__/router.test.js.snap b/src/components/router/__tests__/__snapshots__/router.test.js.snap
index f9e8e1d7d..f086ce0b4 100644
--- a/src/components/router/__tests__/__snapshots__/router.test.js.snap
+++ b/src/components/router/__tests__/__snapshots__/router.test.js.snap
@@ -1,20 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Router Component should handle unique route settings: settings 1`] = `
-
-
-
-
+
+ }
+>
+
+
+
+
+
`;
exports[`Router Component should pass customized props to routed components: routeDetail and location parsedSearch props 1`] = `
@@ -51,33 +59,41 @@ Object {
`;
exports[`Router Component should render a basic component: basic 1`] = `
-
-
-
-
-
-
-
+
+ }
+>
+
+
+
+
+
+
+
+
`;
diff --git a/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap b/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap
index 5f2fe6baa..f77e4438b 100644
--- a/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap
+++ b/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap
@@ -42,11 +42,10 @@ exports[`RouterHelpers should return an error route: error route 1`] = `
Object {
"activateOnError": true,
"component": Object {
- "$$typeof": Symbol(react.memo),
- "WrappedComponent": [Function],
- "compare": null,
- "displayName": "Connect(OptinView)",
- "type": [Function],
+ "$$typeof": Symbol(react.lazy),
+ "_ctor": [Function],
+ "_result": null,
+ "_status": -1,
},
"disabled": false,
"exact": true,
@@ -68,11 +67,10 @@ Object {
},
"navRoute": Object {
"component": Object {
- "$$typeof": Symbol(react.memo),
- "WrappedComponent": [Function],
- "compare": null,
- "displayName": "Connect(RhelView)",
- "type": [Function],
+ "$$typeof": Symbol(react.lazy),
+ "_ctor": [Function],
+ "_result": null,
+ "_status": -1,
},
"default": true,
"disabled": false,
@@ -88,11 +86,10 @@ Object {
},
"route": Object {
"component": Object {
- "$$typeof": Symbol(react.memo),
- "WrappedComponent": [Function],
- "compare": null,
- "displayName": "Connect(RhelView)",
- "type": [Function],
+ "$$typeof": Symbol(react.lazy),
+ "_ctor": [Function],
+ "_result": null,
+ "_status": -1,
},
"disabled": false,
"exact": true,
@@ -115,11 +112,10 @@ Object {
},
"navRoute": Object {
"component": Object {
- "$$typeof": Symbol(react.memo),
- "WrappedComponent": [Function],
- "compare": null,
- "displayName": "Connect(RhelView)",
- "type": [Function],
+ "$$typeof": Symbol(react.lazy),
+ "_ctor": [Function],
+ "_result": null,
+ "_status": -1,
},
"default": true,
"disabled": false,
@@ -135,11 +131,10 @@ Object {
},
"route": Object {
"component": Object {
- "$$typeof": Symbol(react.memo),
- "WrappedComponent": [Function],
- "compare": null,
- "displayName": "Connect(RhelView)",
- "type": [Function],
+ "$$typeof": Symbol(react.lazy),
+ "_ctor": [Function],
+ "_result": null,
+ "_status": -1,
},
"disabled": false,
"exact": true,
@@ -170,11 +165,10 @@ Object {
},
"navRoute": Object {
"component": Object {
- "$$typeof": Symbol(react.memo),
- "WrappedComponent": [Function],
- "compare": null,
- "displayName": "Connect(RhelView)",
- "type": [Function],
+ "$$typeof": Symbol(react.lazy),
+ "_ctor": [Function],
+ "_result": null,
+ "_status": -1,
},
"default": true,
"disabled": false,
@@ -211,11 +205,10 @@ Object {
},
"navRoute": Object {
"component": Object {
- "$$typeof": Symbol(react.memo),
- "WrappedComponent": [Function],
- "compare": null,
- "displayName": "Connect(RhelView)",
- "type": [Function],
+ "$$typeof": Symbol(react.lazy),
+ "_ctor": [Function],
+ "_result": null,
+ "_status": -1,
},
"disabled": false,
"exact": true,
@@ -238,11 +231,10 @@ Object {
"route": Object {
"activateOnError": true,
"component": Object {
- "$$typeof": Symbol(react.memo),
- "WrappedComponent": [Function],
- "compare": null,
- "displayName": "Connect(OptinView)",
- "type": [Function],
+ "$$typeof": Symbol(react.lazy),
+ "_ctor": [Function],
+ "_result": null,
+ "_status": -1,
},
"disabled": false,
"exact": true,
diff --git a/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap b/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap
index 75b9b187b..9777a4489 100644
--- a/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap
+++ b/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap
@@ -52,11 +52,10 @@ exports[`RouterTypes should return specific properties: routes 1`] = `
Array [
Object {
"component": Object {
- "$$typeof": Symbol(react.memo),
- "WrappedComponent": [Function],
- "compare": null,
- "displayName": "Connect(RhelView)",
- "type": [Function],
+ "$$typeof": Symbol(react.lazy),
+ "_ctor": [Function],
+ "_result": null,
+ "_status": -1,
},
"disabled": false,
"exact": true,
@@ -66,11 +65,10 @@ Array [
},
Object {
"component": Object {
- "$$typeof": Symbol(react.memo),
- "WrappedComponent": [Function],
- "compare": null,
- "displayName": "Connect(RhelView)",
- "type": [Function],
+ "$$typeof": Symbol(react.lazy),
+ "_ctor": [Function],
+ "_result": null,
+ "_status": -1,
},
"disabled": false,
"exact": true,
@@ -80,11 +78,10 @@ Array [
},
Object {
"component": Object {
- "$$typeof": Symbol(react.memo),
- "WrappedComponent": [Function],
- "compare": null,
- "displayName": "Connect(OpenshiftView)",
- "type": [Function],
+ "$$typeof": Symbol(react.lazy),
+ "_ctor": [Function],
+ "_result": null,
+ "_status": -1,
},
"disabled": false,
"exact": true,
@@ -95,11 +92,10 @@ Array [
Object {
"activateOnError": true,
"component": Object {
- "$$typeof": Symbol(react.memo),
- "WrappedComponent": [Function],
- "compare": null,
- "displayName": "Connect(OptinView)",
- "type": [Function],
+ "$$typeof": Symbol(react.lazy),
+ "_ctor": [Function],
+ "_result": null,
+ "_status": -1,
},
"disabled": false,
"exact": true,
diff --git a/src/components/router/__tests__/routerTypes.test.js b/src/components/router/__tests__/routerTypes.test.js
index abce41dcd..9f708063b 100644
--- a/src/components/router/__tests__/routerTypes.test.js
+++ b/src/components/router/__tests__/routerTypes.test.js
@@ -8,4 +8,20 @@ describe('RouterTypes', () => {
expect(platformModalRedirect).toMatchSnapshot('platformModalRedirect');
expect(routes).toMatchSnapshot('routes');
});
+
+ it('should return a lazy loaded view for every route', () => {
+ const lazyLoadComponents = [];
+
+ routes.forEach(({ component, to }) => {
+ const routeComponent = Object.getOwnPropertyNames(component)
+ .map(prop => (component[prop] || '').toString())
+ .find(val => /react/i.test(val));
+
+ if (/lazy/.test(routeComponent)) {
+ lazyLoadComponents.push({ routeComponentType: routeComponent, route: to });
+ }
+ });
+
+ expect(lazyLoadComponents.length).toBe(4);
+ });
});
diff --git a/src/components/router/redirect.js b/src/components/router/redirect.js
index 221b79a50..830dc7a21 100644
--- a/src/components/router/redirect.js
+++ b/src/components/router/redirect.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
import { withRouter, Route } from 'react-router-dom';
import { routerHelpers } from './routerHelpers';
import { helpers } from '../../common';
+import { Loader } from '../loader/loader';
/**
* A routing redirect.
@@ -31,7 +32,12 @@ const Redirect = ({ baseName, history, isRedirect, isReplace, url, route }) => {
if (isRedirect === true) {
if (route && history) {
const routeDetail = routerHelpers.getRouteDetail({ pathname: route });
- return {routeDetail && };
+
+ return (
+ }>
+ {routeDetail && }
+
+ );
}
const forcePath = url || (route && path.join(baseName, route));
diff --git a/src/components/router/router.js b/src/components/router/router.js
index 690c3377c..e72074b1f 100644
--- a/src/components/router/router.js
+++ b/src/components/router/router.js
@@ -4,6 +4,7 @@ import { Redirect as ReactRouterDomRedirect, Route, Switch } from 'react-router-
import Redirect from './redirect';
import { routerHelpers } from './routerHelpers';
import { routerTypes } from './routerTypes';
+import { Loader } from '../loader/loader';
/**
* Load routes.
@@ -99,10 +100,12 @@ class Router extends React.Component {
const { renderRoutes, redirectRoot } = this.renderRoutes();
return (
-
- {renderRoutes}
- {redirectRoot}
-
+ }>
+
+ {renderRoutes}
+ {redirectRoot}
+
+
);
}
}
diff --git a/src/components/router/routerTypes.js b/src/components/router/routerTypes.js
index 0ec0000db..e9ca46c3e 100644
--- a/src/components/router/routerTypes.js
+++ b/src/components/router/routerTypes.js
@@ -1,8 +1,6 @@
+import React from 'react';
import path from 'path';
import { helpers } from '../../common/helpers';
-import OpenshiftView from '../openshiftView/openshiftView';
-import OptinView from '../optinView/optinView';
-import RhelView from '../rhelView/rhelView';
import { RHSM_API_PATH_ID_TYPES } from '../../types/rhsmApiTypes';
/**
@@ -35,7 +33,7 @@ const routes = [
{
to: '/rhel-sw/all',
redirect: true,
- component: RhelView,
+ component: React.lazy(() => import('../rhelView/rhelView')),
exact: true,
render: true,
disabled: helpers.UI_DISABLED
@@ -43,7 +41,7 @@ const routes = [
{
id: 'rhel-sw',
to: '/rhel-sw/:variant',
- component: RhelView,
+ component: React.lazy(() => import('../rhelView/rhelView')),
exact: true,
render: true,
disabled: helpers.UI_DISABLED
@@ -51,7 +49,7 @@ const routes = [
{
id: 'openshift-sw',
to: '/openshift-sw',
- component: OpenshiftView,
+ component: React.lazy(() => import('../openshiftView/openshiftView')),
exact: true,
render: true,
disabled: helpers.UI_DISABLED
@@ -59,7 +57,7 @@ const routes = [
{
id: 'optin',
to: '/optin',
- component: OptinView,
+ component: React.lazy(() => import('../optinView/optinView')),
exact: true,
render: true,
activateOnError: true,
diff --git a/tests/__snapshots__/dist.test.js.snap b/tests/__snapshots__/dist.test.js.snap
index 574ec8ac9..a10cc659f 100644
--- a/tests/__snapshots__/dist.test.js.snap
+++ b/tests/__snapshots__/dist.test.js.snap
@@ -7,13 +7,30 @@ Array [
"./build/locales/en-US.json",
"./build/locales/en.json",
"./build/locales/locales.json",
- "./build/static/css/2*chunk*map",
- "./build/static/css/2*chunk.css",
+ "./build/static/css/0*chunk*map",
+ "./build/static/css/0*chunk.css",
+ "./build/static/css/5*chunk*map",
+ "./build/static/css/5*chunk.css",
+ "./build/static/css/6*chunk*map",
+ "./build/static/css/6*chunk.css",
"./build/static/css/main*chunk*map",
"./build/static/css/main*chunk.css",
- "./build/static/js/2*chunk*LICENSE.txt",
+ "./build/static/js/0*chunk*LICENSE.txt",
+ "./build/static/js/0*chunk*map",
+ "./build/static/js/0*chunk.js",
+ "./build/static/js/1*chunk*map",
+ "./build/static/js/1*chunk.js",
"./build/static/js/2*chunk*map",
"./build/static/js/2*chunk.js",
+ "./build/static/js/5*chunk*LICENSE.txt",
+ "./build/static/js/5*chunk*map",
+ "./build/static/js/5*chunk.js",
+ "./build/static/js/6*chunk*map",
+ "./build/static/js/6*chunk.js",
+ "./build/static/js/7*chunk*map",
+ "./build/static/js/7*chunk.js",
+ "./build/static/js/8*chunk*map",
+ "./build/static/js/8*chunk.js",
"./build/static/js/main*chunk*map",
"./build/static/js/main*chunk.js",
"./build/static/js/runtime-main*js",
diff --git a/yarn.lock b/yarn.lock
index 8830604b8..cc3ace6f3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1556,10 +1556,10 @@
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.2.tgz#7c6dc4ecef16149fd7a736710baa1b811017fdca"
integrity sha512-JlGTGRYHC2QK+DDbePyXdBdooxFq2+noLfWpRqJtkxcb/oYWzOF0kcbfvvbWrwevCC1l6hLUg1wHYT+ona5BWQ==
-"@redhat-cloud-services/frontend-components-notifications@2.1.0":
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components-notifications/-/frontend-components-notifications-2.1.0.tgz#440d6da5983f92306eb504bb559a8799211e3caa"
- integrity sha512-MNZ8edZnRLb+0S8xBhk3DmAr3vdYRXY73QcuFrQdUojY6vGSN8Q6RqwMXlzYBn5AJVCSYeIuqsKxT36WTdFo+A==
+"@redhat-cloud-services/frontend-components-notifications@2.1.1":
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components-notifications/-/frontend-components-notifications-2.1.1.tgz#24aa6bf64fae7546becc1eefb640cfd5cdf4391a"
+ integrity sha512-iufWE31xDdt3MpSQDSqdhVyTtZm7vxjwm9wJL7mWNf86anzGmt7qvGy7Gi7n3YHQZKhSlYqNaE7mReG7qps/cQ==
dependencies:
"@redhat-cloud-services/frontend-components-utilities" "2.1.0-beta"
@@ -1596,10 +1596,10 @@
commander ">=2.20.0"
react-content-loader ">=3.4.1"
-"@redhat-cloud-services/frontend-components@2.1.1":
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components/-/frontend-components-2.1.1.tgz#9f066e2d5163b655129c79a1e5c8a730db822e09"
- integrity sha512-e2MTCBcmGhmLthky28gkgspUQprluFn/XI5UNnFqqEbE0HaX9O4BLxRoiH5qV2fDsl3FnA9gmeUpJjwO/hbBaw==
+"@redhat-cloud-services/frontend-components@2.1.3":
+ version "2.1.3"
+ resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components/-/frontend-components-2.1.3.tgz#7c71c6f78945d734145fef2724e61a6ec8e4ce8f"
+ integrity sha512-c9IYvcLqpq+JUS1cT9tjCQ94inUmtLnN34PXWCcmPoBERYSvpNX0ebGERC8Mw09QqTeNHPM1cV5r6JATP5YMQQ==
dependencies:
"@redhat-cloud-services/frontend-components-utilities" "*"
sanitize-html "^1.25.0"