fix(preview): add preview sdk load check

src/elements/content-preview/ContentPreview.js

@@ -228,6 +228,8 @@ class ContentPreview extends React.PureComponent<Props, State> {
 
     stagedFile: ?BoxItem;
 
+    previewLibraryLoaded: boolean = false;
+
     updateVersionToCurrent: ?() => void;
 
     dynamicOnPreviewLoadAction: ?() => void;
@@ -452,6 +454,13 @@ class ContentPreview extends React.PureComponent<Props, State> {
         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<Props, State> {
             ...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;
         }
 

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