fix(routerTypes): issues/328 lazy load routing (#337)

* build, frontend and notifications packages patched * build, integration dist/file output test * router, apply react suspense loading * routerTypes, react lazy app routes
RedHatInsights · Jul 30, 2020 · 8821359 · 8821359
1 parent 40d9b87
commit 8821359
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 128 deletions.
diff --git 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
@@ -1,20 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Router Component should handle unique route settings: settings 1`] = `
-<Switch>
-  <Route
-    component={[Function]}
-    exact={false}
-    key="/lorem"
-    path="/lorem"
-  />
-  <Route
-    component={[Function]}
-    exact={false}
-    key="/ipsum"
-    path="/ipsum"
-  />
-</Switch>
+<Suspense
+  fallback={
+    <Loader
+      variant="title"
+    />
+  }
+>
+  <Switch>
+    <Route
+      component={[Function]}
+      exact={false}
+      key="/lorem"
+      path="/lorem"
+    />
+    <Route
+      component={[Function]}
+      exact={false}
+      key="/ipsum"
+      path="/ipsum"
+    />
+  </Switch>
+</Suspense>
 `;
 
 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`] = `
-<Switch>
-  <Route
-    exact={true}
-    key="/rhel-sw/all"
-    path="/rhel-sw/all"
-    render={[Function]}
-  />
-  <Route
-    exact={true}
-    key="/rhel-sw/:variant"
-    path="/rhel-sw/:variant"
-    render={[Function]}
-  />
-  <Route
-    exact={true}
-    key="/openshift-sw"
-    path="/openshift-sw"
-    render={[Function]}
-  />
-  <Route
-    exact={true}
-    key="/optin"
-    path="/optin"
-    render={[Function]}
-  />
-  <Redirect
-    to="/rhel-sw/all"
-  />
-</Switch>
+<Suspense
+  fallback={
+    <Loader
+      variant="title"
+    />
+  }
+>
+  <Switch>
+    <Route
+      exact={true}
+      key="/rhel-sw/all"
+      path="/rhel-sw/all"
+      render={[Function]}
+    />
+    <Route
+      exact={true}
+      key="/rhel-sw/:variant"
+      path="/rhel-sw/:variant"
+      render={[Function]}
+    />
+    <Route
+      exact={true}
+      key="/openshift-sw"
+      path="/openshift-sw"
+      render={[Function]}
+    />
+    <Route
+      exact={true}
+      key="/optin"
+      path="/optin"
+      render={[Function]}
+    />
+    <Redirect
+      to="/rhel-sw/all"
+    />
+  </Switch>
+</Suspense>
 `;
diff --git 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
@@ -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
@@ -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
@@ -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 <Route path="*">{routeDetail && <routeDetail.component />}</Route>;
+
+      return (
+        <React.Suspense fallback={<Loader variant="title" />}>
+          <Route path="*">{routeDetail && <routeDetail.component />}</Route>
+        </React.Suspense>
+      );
     }
 
     const forcePath = url || (route && path.join(baseName, route));

diff --git 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 (
-      <Switch>
-        {renderRoutes}
-        {redirectRoot}
-      </Switch>
+      <React.Suspense fallback={<Loader variant="title" />}>
+        <Switch>
+          {renderRoutes}
+          {redirectRoot}
+        </Switch>
+      </React.Suspense>
     );
   }
 }