feat(content-sidebar): add ability to defer sidebar data fetching requests (#4410)

* feat(content-sidebar): add ability to defer sidebar data fetching requests

* fix: address comments

* fix: address comments

* fix: address comments

* fix: address comments

Author: shahzadaziz

src/elements/content-sidebar/ActivitySidebar.js

@@ -99,6 +99,8 @@ type ExternalProps = {
     onTaskUpdate: () => any,
     onTaskView: (id: string, isCreator: boolean) => any,
     routerDisabled?: boolean,
+    /** When true, enables data fetching. When false, defers data fetching. Used to prioritize preview loading. */
+    shouldFetchSidebarData?: boolean,
 } & ErrorContextProps &
     WithAnnotatorContextProps;
 
@@ -185,7 +187,20 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
     }
 
     componentDidMount() {
-        this.fetchFeedItems(true);
+        const { shouldFetchSidebarData = true } = this.props;
+        if (shouldFetchSidebarData) {
+            this.fetchFeedItems(true);
+        }
+    }
+
+    componentDidUpdate(prevProps: Props) {
+        const { shouldFetchSidebarData = true } = this.props;
+        const { shouldFetchSidebarData: prevShouldFetchSidebarData = true } = prevProps;
+
+        // Fetch when fetch is enabled
+        if (!prevShouldFetchSidebarData && shouldFetchSidebarData) {
+            this.fetchFeedItems(true);
+        }
     }
 
     handleAnnotationDelete = ({ id, permissions }: { id: string, permissions: AnnotationPermission }) => {

src/elements/content-sidebar/ContentSidebar.js

@@ -94,8 +94,10 @@ type Props = {
     responseInterceptor?: Function,
     sharedLink?: string,
     sharedLinkPassword?: string,
-    theme?: Theme,
+    /** When true, enables data fetching. When false, defers data fetching. Used to prioritize preview loading. */
+    shouldFetchSidebarData?: boolean,
     signSidebarProps: SignSidebarProps,
+    theme?: Theme,
     token: Token,
     versionsSidebarProps: VersionsSidebarProps,
 } & ErrorContextProps &
@@ -355,6 +357,7 @@ class ContentSidebar extends React.Component<Props, State> {
             className,
             currentUser,
             defaultView,
+            shouldFetchSidebarData,
             detailsSidebarProps,
             docGenSidebarProps,
             features,
@@ -399,6 +402,7 @@ class ContentSidebar extends React.Component<Props, State> {
                                 boxAISidebarProps={boxAISidebarProps}
                                 className={className}
                                 currentUser={currentUser}
+                                shouldFetchSidebarData={shouldFetchSidebarData}
                                 detailsSidebarProps={detailsSidebarProps}
                                 docGenSidebarProps={docGenSidebarProps}
                                 file={file}

src/elements/content-sidebar/Sidebar.js

@@ -70,6 +70,8 @@ type Props = {
     onPanelChange?: (name: string, isInitialState: boolean) => void,
     onVersionChange?: Function,
     onVersionHistoryClick?: Function,
+    /** When true, enables data fetching. When false, defers data fetching. Used to prioritize preview loading. */
+    shouldFetchSidebarData?: boolean,
     signSidebarProps: SignSidebarProps,
     theme?: Theme,
     versionsSidebarProps: VersionsSidebarProps,
@@ -297,6 +299,7 @@ class Sidebar extends React.Component<Props, State> {
             className,
             currentUser,
             currentUserError,
+            shouldFetchSidebarData,
             detailsSidebarProps,
             docGenSidebarProps,
             file,
@@ -359,6 +362,7 @@ class Sidebar extends React.Component<Props, State> {
                             boxAISidebarProps={boxAISidebarProps}
                             currentUser={currentUser}
                             currentUserError={currentUserError}
+                            shouldFetchSidebarData={shouldFetchSidebarData}
                             elementId={this.id}
                             defaultPanel={defaultPanel}
                             detailsSidebarProps={detailsSidebarProps}

src/elements/content-sidebar/SidebarPanels.js

@@ -71,6 +71,8 @@ type Props = {
     onPanelChange?: (name: string, isInitialState?: boolean) => void,
     onVersionChange?: Function,
     onVersionHistoryClick?: Function,
+    /** When true, enables data fetching. When false, defers data fetching. Used to prioritize preview loading. */
+    shouldFetchSidebarData?: boolean,
     versionsSidebarProps: VersionsSidebarProps,
 };
 
@@ -219,6 +221,7 @@ class SidebarPanels extends React.Component<Props, State> {
             currentUser,
             currentUserError,
             defaultPanel = '',
+            shouldFetchSidebarData,
             detailsSidebarProps,
             docGenSidebarProps,
             elementId,
@@ -329,6 +332,7 @@ class SidebarPanels extends React.Component<Props, State> {
                             this.handlePanelRender(SIDEBAR_VIEW_ACTIVITY);
                             return (
                                 <LoadableActivitySidebar
+                                    shouldFetchSidebarData={shouldFetchSidebarData}
                                     elementId={elementId}
                                     currentUser={currentUser}
                                     currentUserError={currentUserError}

src/elements/content-sidebar/__tests__/ActivitySidebar.test.js

@@ -110,6 +110,66 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
         test('should fetch the file and refresh the cache and fetch the current user', () => {
             expect(instance.fetchFeedItems).toHaveBeenCalledWith(true);
         });
+
+        test('should not fetch feed items when shouldFetchSidebarData is false', () => {
+            jest.restoreAllMocks();
+            jest.spyOn(ActivitySidebarComponent.prototype, 'fetchFeedItems');
+
+            getWrapper({ shouldFetchSidebarData: false });
+
+            expect(ActivitySidebarComponent.prototype.fetchFeedItems).not.toHaveBeenCalled();
+        });
+
+        test('should fetch feed items when shouldFetchSidebarData is true', () => {
+            jest.restoreAllMocks();
+            jest.spyOn(ActivitySidebarComponent.prototype, 'fetchFeedItems');
+
+            getWrapper({ shouldFetchSidebarData: true });
+
+            expect(ActivitySidebarComponent.prototype.fetchFeedItems).toHaveBeenCalledWith(true);
+        });
+    });
+
+    describe('componentDidUpdate()', () => {
+        test('should fetch feed items when shouldFetchSidebarData changes from false to true', () => {
+            const wrapper = getWrapper({ shouldFetchSidebarData: false });
+            const instance = wrapper.instance();
+            instance.fetchFeedItems = jest.fn();
+
+            wrapper.setProps({ shouldFetchSidebarData: true });
+
+            expect(instance.fetchFeedItems).toHaveBeenCalledWith(true);
+        });
+
+        test('should not fetch feed items when shouldFetchSidebarData remains false', () => {
+            const wrapper = getWrapper({ shouldFetchSidebarData: false });
+            const instance = wrapper.instance();
+            instance.fetchFeedItems = jest.fn();
+
+            wrapper.setProps({ shouldFetchSidebarData: false });
+
+            expect(instance.fetchFeedItems).not.toHaveBeenCalled();
+        });
+
+        test('should not fetch feed items when shouldFetchSidebarData remains true', () => {
+            const wrapper = getWrapper({ shouldFetchSidebarData: true });
+            const instance = wrapper.instance();
+            instance.fetchFeedItems = jest.fn();
+
+            wrapper.setProps({ shouldFetchSidebarData: true });
+
+            expect(instance.fetchFeedItems).not.toHaveBeenCalled();
+        });
+
+        test('should not fetch feed items when shouldFetchSidebarData changes from true to false', () => {
+            const wrapper = getWrapper({ shouldFetchSidebarData: true });
+            const instance = wrapper.instance();
+            instance.fetchFeedItems = jest.fn();
+
+            wrapper.setProps({ shouldFetchSidebarData: false });
+
+            expect(instance.fetchFeedItems).not.toHaveBeenCalled();
+        });
     });
 
     describe('render()', () => {