diff --git a/src/elements/content-sidebar/ActivitySidebar.js b/src/elements/content-sidebar/ActivitySidebar.js index cb94e3f6a6..67bb6a5f3d 100644 --- a/src/elements/content-sidebar/ActivitySidebar.js +++ b/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 { } 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 }) => { diff --git a/src/elements/content-sidebar/ContentSidebar.js b/src/elements/content-sidebar/ContentSidebar.js index 6c218e689c..7b9144d8d1 100644 --- a/src/elements/content-sidebar/ContentSidebar.js +++ b/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 { className, currentUser, defaultView, + shouldFetchSidebarData, detailsSidebarProps, docGenSidebarProps, features, @@ -399,6 +402,7 @@ class ContentSidebar extends React.Component { boxAISidebarProps={boxAISidebarProps} className={className} currentUser={currentUser} + shouldFetchSidebarData={shouldFetchSidebarData} detailsSidebarProps={detailsSidebarProps} docGenSidebarProps={docGenSidebarProps} file={file} diff --git a/src/elements/content-sidebar/Sidebar.js b/src/elements/content-sidebar/Sidebar.js index 5a5babdf5c..b8955151a1 100644 --- a/src/elements/content-sidebar/Sidebar.js +++ b/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 { className, currentUser, currentUserError, + shouldFetchSidebarData, detailsSidebarProps, docGenSidebarProps, file, @@ -359,6 +362,7 @@ class Sidebar extends React.Component { boxAISidebarProps={boxAISidebarProps} currentUser={currentUser} currentUserError={currentUserError} + shouldFetchSidebarData={shouldFetchSidebarData} elementId={this.id} defaultPanel={defaultPanel} detailsSidebarProps={detailsSidebarProps} diff --git a/src/elements/content-sidebar/SidebarPanels.js b/src/elements/content-sidebar/SidebarPanels.js index 1e6a854796..f303da6240 100644 --- a/src/elements/content-sidebar/SidebarPanels.js +++ b/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 { currentUser, currentUserError, defaultPanel = '', + shouldFetchSidebarData, detailsSidebarProps, docGenSidebarProps, elementId, @@ -329,6 +332,7 @@ class SidebarPanels extends React.Component { this.handlePanelRender(SIDEBAR_VIEW_ACTIVITY); return ( { 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()', () => {