Replaced react-loadable with @loadable/component

client/components/lazy-route.jsx

@@ -1,39 +1,13 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
-import Loadable from 'react-loadable';
+import loadable from '@loadable/component';
 
-const Loading = props => {
+const LazyRoute = props => {
-	if (props.error) {
+	const { component, ...lazyProps } = props;
-		return <p>{props.error}</p>;
-	}
 
-	if (props.timedOut) {
+	const lazyComponent = loadable(component);
-		return (
-			<div className='page'>
-				<p>Page Timed Out</p>
-			</div>
-		);
-	}
 
-	if (props.pastDelay) {
+	return <Route {...lazyProps} component={lazyComponent} />
-		return (
-			<div className='page'>
-				<p>Page Loading...</p>
-			</div>
-		);
-	}
-
-	return null;
-};
-
-const LazyRoute = lazyProps => {
-	const component = Loadable({
-		loader: lazyProps.component,
-		loading: Loading,
-		timeout: 10000
-	});
-
-	return <Route {...lazyProps} component={component} />
 };
 
 export default LazyRoute;

package-lock.json

@@ -12,6 +12,7 @@
         "@babel/core": "^7.12.10",
         "@babel/preset-env": "^7.12.11",
         "@babel/preset-react": "^7.12.10",
+        "@loadable/component": "^5.14.1",
         "babel-loader": "^8.2.2",
         "clean-webpack-plugin": "^3.0.0",
         "concurrently": "^5.3.0",
@@ -26,7 +27,6 @@
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
         "react-dropdown-select": "^4.7.4",
-        "react-loadable": "^5.5.0",
         "react-markdown": "^5.0.3",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
@@ -1230,6 +1230,26 @@
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
       "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
+    "node_modules/@loadable/component": {
+      "version": "5.14.1",
+      "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.14.1.tgz",
+      "integrity": "sha512-UQBZfZrp1FLTf8RNhljXNHFNY4QhAA1L2+GOEeABBFre9TD0aFyQh3Sai5QxcOfy+FTbjIfti5iHaNRR7yUzEQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.7",
+        "hoist-non-react-statics": "^3.3.1",
+        "react-is": "^16.12.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.11",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz",
@@ -6963,14 +6983,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "node_modules/react-loadable": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.5.0.tgz",
-      "integrity": "sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==",
-      "dependencies": {
-        "prop-types": "^15.5.0"
-      }
-    },
     "node_modules/react-markdown": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-5.0.3.tgz",
@@ -11179,6 +11191,16 @@
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
       "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
+    "@loadable/component": {
+      "version": "5.14.1",
+      "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.14.1.tgz",
+      "integrity": "sha512-UQBZfZrp1FLTf8RNhljXNHFNY4QhAA1L2+GOEeABBFre9TD0aFyQh3Sai5QxcOfy+FTbjIfti5iHaNRR7yUzEQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.7",
+        "hoist-non-react-statics": "^3.3.1",
+        "react-is": "^16.12.0"
+      }
+    },
     "@polka/url": {
       "version": "1.0.0-next.11",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz",
@@ -15818,14 +15840,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "react-loadable": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.5.0.tgz",
-      "integrity": "sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==",
-      "requires": {
-        "prop-types": "^15.5.0"
-      }
-    },
     "react-markdown": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-5.0.3.tgz",

package.json

@@ -27,6 +27,7 @@
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
+    "@loadable/component": "^5.14.1",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
     "concurrently": "^5.3.0",
@@ -41,7 +42,6 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-dropdown-select": "^4.7.4",
-    "react-loadable": "^5.5.0",
     "react-markdown": "^5.0.3",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

webpack.config.js

@@ -32,7 +32,7 @@ module.exports = ({ production, analyzer }) => {
 							loader: 'babel-loader',
 							options: {
 								presets: ['@babel/preset-env', '@babel/preset-react'],
-								plugins: ['react-loadable/babel', '@babel/plugin-syntax-dynamic-import']
+								plugins: ['@babel/plugin-syntax-dynamic-import']
 							}
 						}
 					]