Try to make a React-Loadable compat component

package.json

@@ -27,9 +27,12 @@
     "@types/loadable__server": "^5.9.1",
     "@types/moment": "^2.13.0",
     "@types/node": "^12.0.10",
+    "@types/p-min-delay": "^3.0.0",
+    "@types/promise-timeout": "^1.3.0",
     "@types/react": "^16.8.22",
     "@types/react-dom": "^16.8.4",
     "@types/react-helmet": "^5.0.8",
+    "@types/react-loadable": "^5.5.1",
     "@types/react-router": "^5.0.2",
     "@types/react-router-dom": "^4.3.4",
     "@types/styled-components": "^4.1.16",
@@ -55,6 +58,8 @@
     "mkdirp": "^0.5.1",
     "moment": "^2.24.0",
     "nodemon": "^1.19.1",
+    "p-min-delay": "^3.1.0",
+    "promise-timeout": "^1.3.0",
     "react": "^16.8.6",
     "react-apollo": "^2.5.8",
     "react-dom": "^16.8.6",

src/components/Loadable.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import ReactLoadable from "react-loadable";
+import loadable from "@loadable/component";
+import pMinDelay from "p-min-delay";
+import { timeout as timedOut, TimeoutError } from "promise-timeout";
+
+/**
+ * Error boundary component
+ */
+class ErrorBoundary extends React.Component<
+  { onError: (error: Error) => void },
+  { error?: Error }
+> {
+  public readonly state: { error?: Error } = {};
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    this.props.onError(error);
+  }
+
+  render() {
+    if (this.state.error) {
+      return null;
+    }
+
+    return this.props.children;
+  }
+}
+
+/**
+ * react-loadable compatibility layer
+ *
+ * The options.loader prop is required, the rest is optional
+ */
+export default function Loadable<
+  Props,
+  Exports extends React.FunctionComponent<Props>
+>(
+  options: Partial<ReactLoadable.Options<Props, Exports>> &
+    Pick<ReactLoadable.Options<Props, Exports>, "loader">
+): React.ComponentType<Props> & ReactLoadable.LoadableComponent {
+  /**
+   * General component for handling errors and loading state
+   */
+  const Fallback: React.FC<ReactLoadable.LoadingComponentProps> = props => {
+    if (options.loading) {
+      return React.createElement(options.loading, props);
+    }
+    return null;
+  };
+
+  /**
+   * Component we return
+   */
+  class InnerLoadable extends React.Component<
+    Props & ReactLoadable.LoadableComponent,
+    { error?: Error }
+  > {
+    public readonly state: { error?: Error } = {};
+
+    static preload() {
+      // not implemented
+    }
+
+    onError = error => {
+      this.setState({ error });
+    };
+
+    retry = () => {
+      this.setState({ error: undefined }, () => this.forceUpdate());
+    };
+
+    render() {
+      const { error } = this.state;
+      const { delay = 200, timeout } = options;
+      if (error) {
+        if (error instanceof TimeoutError) {
+          return (
+            <Fallback
+              error={undefined}
+              isLoading={false}
+              timedOut={true}
+              pastDelay={false}
+              retry={this.retry}
+            />
+          );
+        }
+        return (
+          <Fallback
+            error={error}
+            isLoading={false}
+            timedOut={false}
+            pastDelay={false}
+            retry={this.retry}
+          />
+        );
+      }
+      return (
+        <ErrorBoundary onError={this.onError}>
+          {React.createElement(
+            loadable(
+              timedOut(
+                pMinDelay(options.loader, delay === false ? 0 : delay),
+                timeout === false ? 0 : timeout
+              ),
+              {
+                fallback: (
+                  <Fallback
+                    isLoading
+                    timedOut={false}
+                    pastDelay={false}
+                    retry={this.retry}
+                    error={undefined}
+                  />
+                )
+              }
+            )
+          )}
+        </ErrorBoundary>
+      );
+    }
+  }
+
+  return InnerLoadable;
+}

src/components/TimeAsync.tsx

@@ -1,4 +1,16 @@
 import React from "react";
 import loadable from "@loadable/component";
+import Loadable from "./Loadable";
 
-export default loadable(() => import(/* webpackChunkName: "Time" */ "./Time"));
+export default Loadable({
+  loader: () => import(/* webpackChunkName: "Time" */ "./Time"),
+  loading: ({ error, isLoading, timedOut }) => (
+    <div>
+      <p>{JSON.stringify({ isLoading })}</p>
+      <p>{JSON.stringify({ timedOut })}</p>
+      <p>error: {error ? error.stack : ""}</p>
+    </div>
+  )
+});
+
+// loadable(() => import(/* webpackChunkName: "Time" */ "./Time"));

yarn.lock

@@ -1075,6 +1075,18 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.14.10.tgz#e491484c6060af8d461e12ec81c0da8a3282b8de"
   integrity sha512-V8wj+w2YMNvGuhgl/MA5fmTxgjmVHVoasfIaxMMZJV6Y8Kk+Ydpi1z2whoShDCJ2BuNVoqH/h1hrygnBxkrw/Q==
 
+"@types/p-min-delay@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/p-min-delay/-/p-min-delay-3.0.0.tgz#9056669a7b39bfc09436fef936c692186a558934"
+  integrity sha512-romF0amnKINzhnWa4bJfKOn65OiHEjkxzfOJrhWysXpekekuW+Zfqo3PSf1GybnYaij2V1QP8N3wmSOW9FPaMQ==
+  dependencies:
+    p-min-delay "*"
+
+"@types/promise-timeout@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@types/promise-timeout/-/promise-timeout-1.3.0.tgz#90649ff6f48c1ead9de142e6dd9f62f8c5a54022"
+  integrity sha512-AtVKSZUtpBoZ4SshXJk5JcTXJllinHKKx615lsRNJUsbbFlI0AI8drlnoiQ+PNvjkeoF9Y8fJUh6UO2khsIBZw==
+
 "@types/prop-types@*":
   version "15.7.1"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
@@ -1099,6 +1111,14 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-loadable@^5.5.1":
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/@types/react-loadable/-/react-loadable-5.5.1.tgz#f04a262f16e9f088098ddad1aa50682ad0984aa7"
+  integrity sha512-PSmh6IT9vHeO9QjhApMMiJ65T0Amrpf3fom+04ur872IdgCZK9MzjeN3Q11bzgQMkrV448sbT8WopQw9o0LX1g==
+  dependencies:
+    "@types/react" "*"
+    "@types/webpack" "*"
+
 "@types/react-native@*":
   version "0.57.63"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.57.63.tgz#56cc7e6426ffe8e3d149c86d3396496370a75396"
@@ -2598,6 +2618,11 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
+delay@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/delay/-/delay-4.3.0.tgz#efeebfb8f545579cb396b3a722443ec96d14c50e"
+  integrity sha512-Lwaf3zVFDMBop1yDuFZ19F9WyGcZcGacsbdlZtWjQmM50tOcMntm1njF/Nb/Vjij3KaSvCF+sEYGKrrjObu2NA==
+
 depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
@@ -4446,6 +4471,13 @@ p-locate@^3.0.0:
   dependencies:
     p-limit "^2.0.0"
 
+p-min-delay@*, p-min-delay@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-min-delay/-/p-min-delay-3.1.0.tgz#9355640bd988710f85abfb82fd6002502b4b17c7"
+  integrity sha512-N7h+7SRInlJZXzV99qaNntiRsmtHDoZAbcPNc2oSA9CHUvkrEJcKAXDD2DkCEVOyoIlBoVw2wUW7Y2OTGDY4Yg==
+  dependencies:
+    delay "^4.1.0"
+
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
@@ -4627,6 +4659,11 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
+promise-timeout@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/promise-timeout/-/promise-timeout-1.3.0.tgz#d1c78dd50a607d5f0a5207410252a3a0914e1014"
+  integrity sha512-5yANTE0tmi5++POym6OgtFmwfDvOXABD9oj/jLQr5GPEyuNEb7jH4wbbANJceJid49jwhi1RddxnhnEAb/doqg==
+
 prop-types@^15.5.4, 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"