replace deprecated react-loadable with suspense

This commit is contained in:
Paul Chavard 2020-10-13 17:04:51 +02:00
parent 59f4c8f7d8
commit ca0ba4ba2d
4 changed files with 22 additions and 17 deletions

View file

@ -1,8 +1,24 @@
import React from 'react';
import Loadable from 'react-loadable';
import React, { Suspense, lazy } from 'react';
import PropTypes from 'prop-types';
const loading = () => <div className="spinner left" />;
const Loader = () => <div className="spinner left" />;
export default function (loader) {
return Loadable({ loader, loading });
function LazyLoad({ component: Component, ...props }) {
return (
<Suspense fallback={<Loader />}>
<Component {...props} />
</Suspense>
);
}
LazyLoad.propTypes = {
component: PropTypes.object
};
export default function Loadable(loader) {
const LazyComponent = lazy(loader);
return function PureComponent(props) {
return <LazyLoad component={LazyComponent} {...props} />;
};
}

View file

@ -60,8 +60,5 @@ ActiveStorage.start();
// Expose globals
window.DS = window.DS || DS;
// Now that Turbolinks is globally exposed,configure ReactRailsUJS
// eslint-disable-next-line no-undef, react-hooks/rules-of-hooks
ReactRailsUJS.useContext(require.context('loaders', true));
// Remove previous event handlers and add new ones:
ReactRailsUJS.detectEvents();

View file

@ -28,7 +28,6 @@
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-intersection-observer": "^8.26.2",
"react-loadable": "^5.5.0",
"react-mapbox-gl": "^4.8.6",
"react-mapbox-gl-draw": "^2.0.4",
"react-query": "^2.23.1",

View file

@ -10924,7 +10924,7 @@ promise-inflight@^1.0.1:
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
prop-types@^15.5.0, prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -11172,13 +11172,6 @@ react-is@^16.8.1, react-is@^16.8.4:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react-loadable@^5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.5.0.tgz#582251679d3da86c32aae2c8e689c59f1196d8c4"
integrity sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==
dependencies:
prop-types "^15.5.0"
react-mapbox-gl-draw@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/react-mapbox-gl-draw/-/react-mapbox-gl-draw-2.0.4.tgz#476d70a6efc07c329fa61c11022bcdab60ac4b91"