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', () => {