[MM-58563] Load profiles on sidebar load irrespective of the current channel (#27992)

* [MM-58563] Load profiles on sidebar load irrespective of the current channel

* Remove await

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

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 () => {
+    test('should fetch profiles for sidebar on sidebar load', async () => {
-        const props = defaultProps;
+        const props = {
+            ...defaultProps,
+            sidebarLoaded: false,
+        };
         const wrapper = shallow<DataPrefetch>(
             <DataPrefetch {...props}/>,
         );
 
         expect(loadProfilesForSidebar).not.toHaveBeenCalled();
 
-        // Change channels
+        // Finish loading the sidebar
-        wrapper.setProps({currentChannelId: 'currentChannelId'});
+        wrapper.setProps({sidebarLoaded: true});
         await Promise.resolve(true);
 
         expect(loadProfilesForSidebar).toHaveBeenCalledTimes(1);
 
-        // Change channels again
+        // Reload the sidebar
-        wrapper.setProps({currentChannelId: 'anotherChannelId'});
+        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<DataPrefetch>(
-            <DataPrefetch {...props}/>,
-        );
-        wrapper.setProps({
-            sidebarLoaded: true,
-        });
-
-        expect(loadProfilesForSidebar).not.toHaveBeenCalled();
-
-        wrapper.setProps({
-            currentChannelId: 'channel',
-        });
-
-        expect(loadProfilesForSidebar).toHaveBeenCalled();
-
-        jest.clearAllMocks();
-
-        // With both loaded at once
-        wrapper = shallow<DataPrefetch>(
-            <DataPrefetch {...props}/>,
-        );
-        wrapper.setProps({
-            currentChannelId: 'channel',
-            sidebarLoaded: true,
-        });
-
-        expect(loadProfilesForSidebar).toHaveBeenCalled();
     });
 });

webapp/channels/src/components/data_prefetch/data_prefetch.tsx

@@ -56,9 +56,12 @@ export default class DataPrefetch extends React.PureComponent<Props> {
 
     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);