Replace react-loadable with loadable-components (#6541)

loadable-components is the officially recommended way to do code splitting with dynamic imports in React: https://reactjs.org/docs/code-splitting.html#reactlazy

react-loadable does not accept issues and is starting to look like an unmaintained project. As React Training was one of the first guides that came up when I was googling how to do dynamic loading in react it seems sensible to change the docs to avoid other people wasting time going down the (in my opinion) wrong path

Many thanks

packages/react-router-dom/docs/guides/code-splitting.md

@@ -1,6 +1,6 @@
 # Code Splitting
 
-One great feature of the web is that we don't have to make our visitors download the entire app before they can use it. You can think of code splitting as incrementally downloading the app. To accomplish this we'll use [webpack], [`@babel/plugin-syntax-dynamic-import`], and [`react-loadable`].
+One great feature of the web is that we don't have to make our visitors download the entire app before they can use it. You can think of code splitting as incrementally downloading the app. To accomplish this we'll use [webpack], [`@babel/plugin-syntax-dynamic-import`], and [`loadable-components`].
 
 [webpack] has built-in support for [dynamic imports][import]; however, if you are using [Babel] (e.g., to compile JSX to JavaScript) then you will need to use the [`@babel/plugin-syntax-dynamic-import`] plugin. This is a syntax-only plugin, meaning Babel won't do any additional transformations. The plugin simply allows Babel to parse dynamic imports so webpack can bundle them as a code split. Your `.babelrc` should look something like this:
 
@@ -11,16 +11,15 @@ One great feature of the web is that we don't have to make our visitors download
 }
 ```
 
-[`react-loadable`] is a higher-order component for loading components with dynamic imports. It handles all sorts of edge cases automatically and makes code splitting simple! Here's an example of how to use [`react-loadable`]:
+[`loadable-components`] is a library for loading components with dynamic imports. It handles all sorts of edge cases automatically and makes code splitting simple! Here's an example of how to use [`loadable-components`]:
 
 ```jsx
-import Loadable from "react-loadable";
+import loadable from '@loadable/component'
 import Loading from "./Loading";
 
-const LoadableComponent = Loadable({
-  loader: () => import("./Dashboard"),
-  loading: Loading
-});
+const LoadableComponent = loadable(() => import('./Dashboard'), {
+  fallback: Loading,
+})
 
 export default class LoadableDashboard extends React.Component {
   render() {
@@ -29,32 +28,19 @@ export default class LoadableDashboard extends React.Component {
 }
 ```
 
-That's all there is to it! Simply use `LoadableDashboard` (or whatever you named your component) and it will automatically be loaded and rendered when you use it in your application. The `loader` option is a function which actually loads the component, and `loading` is a placeholder component to show while the real component is loading.
+That's all there is to it! Simply use `LoadableDashboard` (or whatever you named your component) and it will automatically be loaded and rendered when you use it in your application. The `fallback` is a placeholder component to show while the real component is loading.
 
-## Code Splitting and Server-Side Rendering
+Full documentation is available [here](https://www.smooth-code.com/open-source/loadable-components/docs/getting-started/)
 
-[`react-loadable`] includes [a guide for server-side rendering][ssr]. All you should need to do is include [`babel-plugin-import-inspector`] in your `.babelrc` and server-side rendering should just work™. Here is an example `.babelrc` file:
+## Code Splitting and Server-Side Rendering
 
-```json
-{
-  "presets": ["@babel/preset-react"],
-  "plugins": [
-    "@babel/plugin-syntax-dynamic-import",
-    [
-      "import-inspector",
-      {
-        "serverSideRequirePath": true
-      }
-    ]
-  ]
-}
-```
+[`loadable-components`] includes [a guide for server-side rendering][ssr].
 
 [babel]: https://babeljs.io/
 [`@babel/preset-react`]:  https://babeljs.io/docs/en/babel-preset-react
 [`@babel/plugin-syntax-dynamic-import`]: https://babeljs.io/docs/plugins/syntax-dynamic-import/
 [`babel-plugin-import-inspector`]: https://github.com/thejameskyle/react-loadable/tree/6902cc87f618446c54daa85d8fecec6836c9461a#babel-plugin-import-inspector
-[`react-loadable`]: https://github.com/thejameskyle/react-loadable
+[`loadable-components`]: https://github.com/smooth-code/loadable-components
 [import]: https://github.com/tc39/proposal-dynamic-import
 [webpack]: https://webpack.js.org/
-[ssr]: https://github.com/thejameskyle/react-loadable/tree/6902cc87f618446c54daa85d8fecec6836c9461a#server-side-rendering
+[ssr]: https://www.smooth-code.com/open-source/loadable-components/docs/server-side-rendering/