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 ( -
-

Page Timed Out

-
- ); - } + const lazyComponent = loadable(component); - if (props.pastDelay) { - return ( -
-

Page Loading...

-
- ); - } - - 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'] } } ]