diff --git a/packages/component/src/createLoadable.js b/packages/component/src/createLoadable.js
index 5a3da831..e4ac0080 100644
--- a/packages/component/src/createLoadable.js
+++ b/packages/component/src/createLoadable.js
@@ -312,7 +312,7 @@ function createLoadable({
} = this.props
const { error, loading, result } = this.state
- if (options.suspense) {
+ if (options.suspense && loading) {
const cachedPromise = this.getCache() || this.loadAsync()
if (cachedPromise.status === STATUS_PENDING) {
throw this.loadAsync()
diff --git a/packages/component/src/loadable.test.js b/packages/component/src/loadable.test.js
index 9705625c..43397976 100644
--- a/packages/component/src/loadable.test.js
+++ b/packages/component/src/loadable.test.js
@@ -359,6 +359,55 @@ describe('#lazy', () => {
await wait(() => expect(container).toHaveTextContent('loaded'))
})
+
+ it('should not suspend when component is preloaded with lazy', async () => {
+ const ContentComponent = () => 'loaded'
+ const ContentComponentModule = { default: ContentComponent }
+
+ // Simulate a preloaded component via chunkExtractor and loadableReady
+ // This replicates the transformed output of the babel plugin constructor
+ const Component = lazy({
+ chunkName() { return 'chunkName' },
+ isReady() { return true },
+ requireSync() { return ContentComponentModule },
+ requireAsync() { return Promise.resolve(ContentComponentModule) },
+ resolve() { return ContentComponent },
+ })
+
+ const { container } = render(
+
+
+ ,
+ )
+ expect(container).toHaveTextContent('loaded')
+ expect(container).not.toHaveTextContent('progress')
+ })
+
+
+ it('should suspend when component is not preloaded with lazy', async () => {
+ const ContentComponent = () => 'loaded'
+ const ContentComponentModule = { default: ContentComponent }
+
+ // Simulate a non-preloaded component via chunkExtractor and loadableReady
+ // This replicates the transformed output of the babel plugin constructor
+ const Component = lazy({
+ chunkName() { return 'chunkName' },
+ isReady() { return false },
+ requireSync() { return ContentComponentModule },
+ requireAsync() { return Promise.resolve(ContentComponentModule) },
+ resolve() { return ContentComponent },
+ })
+
+ const { container } = render(
+
+
+ ,
+ )
+ expect(container).toHaveTextContent('progress')
+ expect(container).not.toHaveTextContent('loaded')
+ await wait(() => expect(container).toHaveTextContent('loaded'))
+ expect(container).not.toHaveTextContent('progress')
+ })
})
describe('#loadable.lib', () => {