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

Author: shahzadaziz

src/elements/content-sidebar/ActivitySidebar.js

@@ -84,6 +84,8 @@ type ExternalProps = {
     activeFeedEntryType?: FocusableFeedItemType,
     currentUser?: User,
     currentUserError?: Errors,
+    /** When true, defers data fetching until set to false. Used to prioritize preview loading. */
+    deferDataFetch?: boolean,
     getUserProfileUrl?: GetProfileUrlCallback,
     hasReplies?: boolean,
     hasTasks?: boolean,
@@ -185,7 +187,20 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
     }
 
     componentDidMount() {
-        this.fetchFeedItems(true);
+        const { deferDataFetch } = this.props;
+        if (!deferDataFetch) {
+            this.fetchFeedItems(true);
+        }
+    }
+
+    componentDidUpdate(prevProps: Props) {
+        const { deferDataFetch } = this.props;
+        const { deferDataFetch: prevDeferDataFetch } = prevProps;
+
+        // Fetch when deferral is lifted
+        if (prevDeferDataFetch && !deferDataFetch) {
+            this.fetchFeedItems(true);
+        }
     }
 
     handleAnnotationDelete = ({ id, permissions }: { id: string, permissions: AnnotationPermission }) => {

src/elements/content-sidebar/ContentSidebar.js

@@ -67,6 +67,8 @@ type Props = {
     clientName: string,
     currentUser?: User,
     defaultView: string,
+    /** When true, defers all data fetching until set to false. Used to prioritize preview loading. */
+    deferDataFetch?: boolean,
     detailsSidebarProps: DetailsSidebarProps,
     docGenSidebarProps?: DocGenSidebarProps,
     features: FeatureConfig,
@@ -205,6 +207,8 @@ class ContentSidebar extends React.Component<Props, State> {
 
     /**
      * Fetches the file data on load
+     * Note: Always fetch file metadata immediately - it's fast and needed for sidebar structure.
+     * The deferDataFetch prop is passed to panels to defer their heavier API calls.
      *
      * @private
      * @inheritdoc
@@ -225,6 +229,7 @@ class ContentSidebar extends React.Component<Props, State> {
         const { fileId }: Props = this.props;
         const { fileId: prevFileId }: Props = prevProps;
 
+        // Fetch when fileId changes
         if (fileId !== prevFileId) {
             this.fetchFile();
         }
@@ -355,6 +360,7 @@ class ContentSidebar extends React.Component<Props, State> {
             className,
             currentUser,
             defaultView,
+            deferDataFetch,
             detailsSidebarProps,
             docGenSidebarProps,
             features,
@@ -399,6 +405,7 @@ class ContentSidebar extends React.Component<Props, State> {
                                 boxAISidebarProps={boxAISidebarProps}
                                 className={className}
                                 currentUser={currentUser}
+                                deferDataFetch={deferDataFetch}
                                 detailsSidebarProps={detailsSidebarProps}
                                 docGenSidebarProps={docGenSidebarProps}
                                 file={file}

src/elements/content-sidebar/Sidebar.js

@@ -46,6 +46,8 @@ type Props = {
     className: string,
     currentUser?: User,
     currentUserError?: Errors,
+    /** When true, defers all data fetching until set to false. Used to prioritize preview loading. */
+    deferDataFetch?: boolean,
     detailsSidebarProps: DetailsSidebarProps,
     docGenSidebarProps: DocGenSidebarProps,
     features: FeatureConfig,
@@ -297,6 +299,7 @@ class Sidebar extends React.Component<Props, State> {
             className,
             currentUser,
             currentUserError,
+            deferDataFetch,
             detailsSidebarProps,
             docGenSidebarProps,
             file,
@@ -359,6 +362,7 @@ class Sidebar extends React.Component<Props, State> {
                             boxAISidebarProps={boxAISidebarProps}
                             currentUser={currentUser}
                             currentUserError={currentUserError}
+                            deferDataFetch={deferDataFetch}
                             elementId={this.id}
                             defaultPanel={defaultPanel}
                             detailsSidebarProps={detailsSidebarProps}

src/elements/content-sidebar/SidebarPanels.js

@@ -49,6 +49,8 @@ type Props = {
     currentUser?: User,
     currentUserError?: Errors,
     defaultPanel?: string,
+    /** When true, defers all data fetching until set to false. Used to prioritize preview loading. */
+    deferDataFetch?: boolean,
     detailsSidebarProps: DetailsSidebarProps,
     docGenSidebarProps: DocGenSidebarProps,
     elementId: string,
@@ -219,6 +221,7 @@ class SidebarPanels extends React.Component<Props, State> {
             currentUser,
             currentUserError,
             defaultPanel = '',
+            deferDataFetch,
             detailsSidebarProps,
             docGenSidebarProps,
             elementId,
@@ -329,6 +332,7 @@ class SidebarPanels extends React.Component<Props, State> {
                             this.handlePanelRender(SIDEBAR_VIEW_ACTIVITY);
                             return (
                                 <LoadableActivitySidebar
+                                    deferDataFetch={deferDataFetch}
                                     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 deferDataFetch is true', () => {
+            jest.restoreAllMocks();
+            jest.spyOn(ActivitySidebarComponent.prototype, 'fetchFeedItems');
+
+            getWrapper({ deferDataFetch: true });
+
+            expect(ActivitySidebarComponent.prototype.fetchFeedItems).not.toHaveBeenCalled();
+        });
+
+        test('should fetch feed items when deferDataFetch is false', () => {
+            jest.restoreAllMocks();
+            jest.spyOn(ActivitySidebarComponent.prototype, 'fetchFeedItems');
+
+            getWrapper({ deferDataFetch: false });
+
+            expect(ActivitySidebarComponent.prototype.fetchFeedItems).toHaveBeenCalledWith(true);
+        });
+    });
+
+    describe('componentDidUpdate()', () => {
+        test('should fetch feed items when deferDataFetch changes from true to false', () => {
+            const wrapper = getWrapper({ deferDataFetch: true });
+            const instance = wrapper.instance();
+            instance.fetchFeedItems = jest.fn();
+
+            wrapper.setProps({ deferDataFetch: false });
+
+            expect(instance.fetchFeedItems).toHaveBeenCalledWith(true);
+        });
+
+        test('should not fetch feed items when deferDataFetch remains true', () => {
+            const wrapper = getWrapper({ deferDataFetch: true });
+            const instance = wrapper.instance();
+            instance.fetchFeedItems = jest.fn();
+
+            wrapper.setProps({ deferDataFetch: true });
+
+            expect(instance.fetchFeedItems).not.toHaveBeenCalled();
+        });
+
+        test('should not fetch feed items when deferDataFetch remains false', () => {
+            const wrapper = getWrapper({ deferDataFetch: false });
+            const instance = wrapper.instance();
+            instance.fetchFeedItems = jest.fn();
+
+            wrapper.setProps({ deferDataFetch: false });
+
+            expect(instance.fetchFeedItems).not.toHaveBeenCalled();
+        });
+
+        test('should not fetch feed items when deferDataFetch changes from false to true', () => {
+            const wrapper = getWrapper({ deferDataFetch: false });
+            const instance = wrapper.instance();
+            instance.fetchFeedItems = jest.fn();
+
+            wrapper.setProps({ deferDataFetch: true });
+
+            expect(instance.fetchFeedItems).not.toHaveBeenCalled();
+        });
     });
 
     describe('render()', () => {