Fixed lazy usage with Suspense and Error Boundary together

package.json

@@ -10,7 +10,7 @@
     },
     {
       "path": "./packages/component/dist/loadable.esm.js",
-      "maxSize": "3.5 kB"
+      "maxSize": "3.6 kB"
     }
   ],
   "scripts": {

packages/component/.size-snapshot.json

@@ -0,0 +1,21 @@
+{
+  "dist/loadable.cjs.js": {
+    "bundled": 13358,
+    "minified": 6507,
+    "gzipped": 2356
+  },
+  "dist/loadable.esm.js": {
+    "bundled": 12975,
+    "minified": 6198,
+    "gzipped": 2286,
+    "treeshaked": {
+      "rollup": {
+        "code": 259,
+        "import_statements": 259
+      },
+      "webpack": {
+        "code": 5302
+      }
+    }
+  }
+}

packages/component/src/createLoadable.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define, react/no-multi-comp, no-underscore-dangle */
 import React from 'react'
-import { invariant } from './util'
+import { invariant, statusAware, STATUS_REJECTED } from './util'
 import Context from './Context'
 
 function resolveConstructor(ctor) {
@@ -90,7 +90,17 @@ function createLoadable({ resolve = identity, render, onLoad }) {
       componentDidMount() {
         this.mounted = true
 
-        if (this.state.loading) {
+        const cachedPromise = this.getCache()
+
+        if (cachedPromise && cachedPromise.status === STATUS_REJECTED) {
+          this.setCache()
+          this.setState({
+            error: undefined,
+            loading: true,
+          })
+
+          if (!options.suspense) this.loadAsync()
+        } else if (this.state.loading) {
           this.loadAsync()
         } else if (!this.state.error) {
           this.triggerOnLoad()
@@ -100,7 +110,6 @@ function createLoadable({ resolve = identity, render, onLoad }) {
       componentDidUpdate(prevProps, prevState) {
         // Component is reloaded if the cacheKey has changed
         if (prevState.cacheKey !== this.state.cacheKey) {
-          this.promise = null
           this.loadAsync()
         }
       }
@@ -149,29 +158,28 @@ function createLoadable({ resolve = identity, render, onLoad }) {
       }
 
       loadAsync() {
-        if (!this.promise) {
-          const { __chunkExtractor, forwardedRef, ...props } = this.props
-          this.promise = ctor
-            .requireAsync(props)
-            .then(loadedModule => {
-              const result = resolve(loadedModule, { Loadable })
-              if (options.suspense) {
-                this.setCache(result)
-              }
-              this.safeSetState(
-                {
-                  result: resolve(loadedModule, { Loadable }),
-                  loading: false,
-                },
-                () => this.triggerOnLoad(),
-              )
-            })
-            .catch(error => {
-              this.safeSetState({ error, loading: false })
-            })
-        }
+        const { __chunkExtractor, forwardedRef, ...props } = this.props
+
+        let promise = this.getCache() || statusAware(ctor.requireAsync(props))
+
+        this.setCache(promise)
+
+        promise = promise
+          .then(loadedModule => {
+            const result = resolve(loadedModule, { Loadable })
+            this.safeSetState(
+              {
+                result,
+                loading: false,
+              },
+              () => this.triggerOnLoad(),
+            )
+          })
+          .catch(error => {
+            this.safeSetState({ error, loading: false })
+          })
 
-        return this.promise
+        return promise
       }
 
       render() {
@@ -184,15 +192,10 @@ function createLoadable({ resolve = identity, render, onLoad }) {
         const { error, loading, result } = this.state
 
         if (options.suspense) {
-          const cachedResult = this.getCache()
-          if (!cachedResult) throw this.loadAsync()
-          return render({
-            loading: false,
-            fallback: null,
-            result: cachedResult,
-            options,
-            props: { ...props, ref: forwardedRef },
-          })
+          const cachedPromise = this.getCache()
+          if (!cachedPromise) {
+            throw this.loadAsync()
+          }
         }
 
         if (error) {