diff --git a/src/elements/content-preview/ContentPreview.js b/src/elements/content-preview/ContentPreview.js index c0a83e50e3..8eeb9b6eed 100644 --- a/src/elements/content-preview/ContentPreview.js +++ b/src/elements/content-preview/ContentPreview.js @@ -228,6 +228,8 @@ class ContentPreview extends React.PureComponent { stagedFile: ?BoxItem; + previewLibraryLoaded: boolean = false; + updateVersionToCurrent: ?() => void; dynamicOnPreviewLoadAction: ?() => void; @@ -452,6 +454,13 @@ class ContentPreview extends React.PureComponent { const fileVersionId = getProp(file, 'file_version.id'); let loadPreview = false; + // Check if preview library just became available and we haven't loaded preview yet + // This handles cases where library loads asynchronously after file is already set + if (!this.previewLibraryLoaded && this.isPreviewLibraryLoaded() && file && !this.preview) { + this.previewLibraryLoaded = true; + return true; + } + if (selectedVersionId !== prevSelectedVersionId) { const isPreviousCurrent = fileVersionId === prevSelectedVersionId || !prevSelectedVersionId; const isSelectedCurrent = fileVersionId === selectedVersionId || !selectedVersionId; @@ -808,8 +817,9 @@ class ContentPreview extends React.PureComponent { ...rest }: Props = this.props; const { file, selectedVersion, startAt }: State = this.state; + this.previewLibraryLoaded = this.isPreviewLibraryLoaded(); - if (!this.isPreviewLibraryLoaded() || !file || !tokenOrTokenFunction) { + if (!this.previewLibraryLoaded || !file || !tokenOrTokenFunction) { return; } diff --git a/src/elements/content-preview/__tests__/ContentPreview.test.js b/src/elements/content-preview/__tests__/ContentPreview.test.js index 6df8401023..b3eefa2854 100644 --- a/src/elements/content-preview/__tests__/ContentPreview.test.js +++ b/src/elements/content-preview/__tests__/ContentPreview.test.js @@ -175,6 +175,14 @@ describe('elements/content-preview/ContentPreview', () => { expect(instance.shouldLoadPreview({ selectedVersion: { id: '1' } })).toBe(false); }); + + test("should return true if the preview library just became available and we haven't loaded preview yet", () => { + instance.previewLibraryLoaded = false; + instance.isPreviewLibraryLoaded = jest.fn().mockReturnValue(true); + instance.preview = undefined; + expect(instance.shouldLoadPreview({ file })).toBe(true); + expect(instance.previewLibraryLoaded).toBe(true); + }); }); describe('canDownload()', () => { @@ -494,6 +502,35 @@ describe('elements/content-preview/ContentPreview', () => { } }, ); + + test('should return if the preview library is not loaded', async () => { + const wrapper = getWrapper(props); + wrapper.setState({ file }); + const instance = wrapper.instance(); + instance.isPreviewLibraryLoaded = jest.fn().mockReturnValue(false); + const spy = jest.spyOn(instance, 'getFileId'); + await instance.loadPreview(); + expect(spy).not.toHaveBeenCalled(); + }); + + test('should return early if the file is not set', async () => { + const wrapper = getWrapper(props); + const instance = wrapper.instance(); + instance.isPreviewLibraryLoaded = jest.fn().mockReturnValue(true); + const spy = jest.spyOn(instance, 'getFileId'); + await instance.loadPreview(); + expect(spy).not.toHaveBeenCalled(); + }); + + test('should return if the token is not set', async () => { + const wrapper = getWrapper({ ...props, token: undefined }); + wrapper.setState({ file }); + const instance = wrapper.instance(); + instance.isPreviewLibraryLoaded = jest.fn().mockReturnValue(true); + const spy = jest.spyOn(instance, 'getFileId'); + await instance.loadPreview(); + expect(spy).not.toHaveBeenCalled(); + }); }); describe('fetchFile()', () => {