diff --git a/client/components/lazy-route.jsx b/client/components/lazy-route.jsx
index d06428b..85d9851 100644
--- a/client/components/lazy-route.jsx
+++ b/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 => {
- if (props.error) {
- return
{props.error}
;
- }
+const LazyRoute = props => {
+ const { component, ...lazyProps } = props;
- if (props.timedOut) {
- return (
-
- );
- }
+ const lazyComponent = loadable(component);
- if (props.pastDelay) {
- return (
-
- );
- }
-
- return null;
-};
-
-const LazyRoute = lazyProps => {
- const component = Loadable({
- loader: lazyProps.component,
- loading: Loading,
- timeout: 10000
- });
-
- return
+ return
};
export default LazyRoute;
diff --git a/package-lock.json b/package-lock.json
index f66b5f4..0a58e1f 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 61424c4..22efac0 100644
--- a/package.json
+++ b/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",
diff --git a/webpack.config.js b/webpack.config.js
index 10b1192..3c3495d 100644
--- a/webpack.config.js
+++ b/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']
}
}
]