diff --git a/webapp/channels/src/components/data_prefetch/data_prefetch.test.tsx b/webapp/channels/src/components/data_prefetch/data_prefetch.test.tsx index 222a62e189..699dcdb0e2 100644 --- a/webapp/channels/src/components/data_prefetch/data_prefetch.test.tsx +++ b/webapp/channels/src/components/data_prefetch/data_prefetch.test.tsx @@ -96,22 +96,25 @@ describe('/components/data_prefetch', () => { expect(instance.prefetchPosts).toHaveBeenCalledWith('currentChannelId'); }); - test('should fetch profiles for sidebar on first channel load', async () => { - const props = defaultProps; + test('should fetch profiles for sidebar on sidebar load', async () => { + const props = { + ...defaultProps, + sidebarLoaded: false, + }; const wrapper = shallow( , ); expect(loadProfilesForSidebar).not.toHaveBeenCalled(); - // Change channels - wrapper.setProps({currentChannelId: 'currentChannelId'}); + // Finish loading the sidebar + wrapper.setProps({sidebarLoaded: true}); await Promise.resolve(true); expect(loadProfilesForSidebar).toHaveBeenCalledTimes(1); - // Change channels again - wrapper.setProps({currentChannelId: 'anotherChannelId'}); + // Reload the sidebar + wrapper.setProps({sidebarLoaded: true}); await Promise.resolve(true); expect(loadProfilesForSidebar).toHaveBeenCalledTimes(1); @@ -345,7 +348,7 @@ describe('/components/data_prefetch', () => { expect(props.actions.prefetchChannelPosts).toHaveBeenCalledWith('mentionChannel', undefined); }); - test('should load profiles once the current channel and sidebar are both loaded', () => { + test('should load profiles once the sidebar is loaded irrespective of the current channel', () => { const props = { ...defaultProps, currentChannelId: '', @@ -374,36 +377,5 @@ describe('/components/data_prefetch', () => { }); expect(loadProfilesForSidebar).toHaveBeenCalled(); - - jest.clearAllMocks(); - - // With sidebar loaded first - wrapper = shallow( - , - ); - wrapper.setProps({ - sidebarLoaded: true, - }); - - expect(loadProfilesForSidebar).not.toHaveBeenCalled(); - - wrapper.setProps({ - currentChannelId: 'channel', - }); - - expect(loadProfilesForSidebar).toHaveBeenCalled(); - - jest.clearAllMocks(); - - // With both loaded at once - wrapper = shallow( - , - ); - wrapper.setProps({ - currentChannelId: 'channel', - sidebarLoaded: true, - }); - - expect(loadProfilesForSidebar).toHaveBeenCalled(); }); }); diff --git a/webapp/channels/src/components/data_prefetch/data_prefetch.tsx b/webapp/channels/src/components/data_prefetch/data_prefetch.tsx index b929ff7816..25fcc6a690 100644 --- a/webapp/channels/src/components/data_prefetch/data_prefetch.tsx +++ b/webapp/channels/src/components/data_prefetch/data_prefetch.tsx @@ -56,9 +56,12 @@ export default class DataPrefetch extends React.PureComponent { async componentDidUpdate(prevProps: Props) { const {currentChannelId, prefetchQueueObj, sidebarLoaded} = this.props; + if (sidebarLoaded && !prevProps.sidebarLoaded) { + loadProfilesForSidebar(); + } + if (currentChannelId && sidebarLoaded && (!prevProps.currentChannelId || !prevProps.sidebarLoaded)) { queue.add(async () => this.prefetchPosts(currentChannelId)); - await loadProfilesForSidebar(); this.prefetchData(); } else if (prevProps.prefetchQueueObj !== prefetchQueueObj) { clearTimeout(this.prefetchTimeout);