Only call fetch list items in graphql boards when list is not collapsed

app/assets/javascripts/boards/components/board_column.vue

@@ -41,7 +41,7 @@ export default {
   watch: {
     filterParams: {
       handler() {
-        if (this.list.id) {
+        if (this.list.id && !this.list.collapsed) {
           this.fetchItemsForList({ listId: this.list.id });
         }
       },

app/assets/javascripts/boards/stores/actions.js

@@ -240,7 +240,7 @@ export default {
   },
 
   updateList: (
-    { commit, state: { issuableType } },
+    { commit, state: { issuableType, boardItemsByListId = {} }, dispatch },
     { listId, position, collapsed, backupList },
   ) => {
     gqlClient
@@ -255,6 +255,12 @@ export default {
       .then(({ data }) => {
         if (data?.updateBoardList?.errors.length) {
           commit(types.UPDATE_LIST_FAILURE, backupList);
+          return;
+        }
+
+        // Only fetch when board items havent been fetched on a collapsed list
+        if (!boardItemsByListId[listId]) {
+          dispatch('fetchItemsForList', { listId });
         }
       })
       .catch(() => {

spec/frontend/boards/components/board_column_spec.js

@@ -15,6 +15,10 @@ describe('Board Column Component', () => {
     wrapper = null;
   });
 
+  const initStore = () => {
+    store = createStore();
+  };
+
   const createComponent = ({ listType = ListType.backlog, collapsed = false } = {}) => {
     const boardId = '1';
 
@@ -29,8 +33,6 @@ describe('Board Column Component', () => {
       listMock.assignee = {};
     }
 
-    store = createStore();
-
     wrapper = shallowMount(BoardColumn, {
       store,
       propsData: {
@@ -47,6 +49,10 @@ describe('Board Column Component', () => {
   const isCollapsed = () => wrapper.classes('is-collapsed');
 
   describe('Given different list types', () => {
+    beforeEach(() => {
+      initStore();
+    });
+
     it('is expandable when List Type is `backlog`', () => {
       createComponent({ listType: ListType.backlog });
 
@@ -79,4 +85,31 @@ describe('Board Column Component', () => {
       expect(wrapper.element.scrollIntoView).toHaveBeenCalled();
     });
   });
+
+  describe('on mount', () => {
+    beforeEach(async () => {
+      initStore();
+      jest.spyOn(store, 'dispatch').mockImplementation();
+    });
+
+    describe('when list is collapsed', () => {
+      it('does not call fetchItemsForList when', async () => {
+        createComponent({ collapsed: true });
+
+        await nextTick();
+
+        expect(store.dispatch).toHaveBeenCalledTimes(0);
+      });
+    });
+
+    describe('when the list is not collapsed', () => {
+      it('calls fetchItemsForList when', async () => {
+        createComponent({ collapsed: false });
+
+        await nextTick();
+
+        expect(store.dispatch).toHaveBeenCalledWith('fetchItemsForList', { listId: 300 });
+      });
+    });
+  });
 });

spec/frontend/boards/stores/actions_spec.js

@@ -492,6 +492,63 @@ describe('moveList', () => {
 });
 
 describe('updateList', () => {
+  const listId = 'gid://gitlab/List/1';
+  const createState = (boardItemsByListId = {}) => ({
+    fullPath: 'gitlab-org',
+    fullBoardId: 'gid://gitlab/Board/1',
+    boardType: 'group',
+    disabled: false,
+    boardLists: [{ type: 'closed' }],
+    issuableType: issuableTypes.issue,
+    boardItemsByListId,
+  });
+
+  describe('when state doesnt have list items', () => {
+    it('calls fetchItemsByList', async () => {
+      const dispatch = jest.fn();
+
+      jest.spyOn(gqlClient, 'mutate').mockResolvedValue({
+        data: {
+          updateBoardList: {
+            errors: [],
+            list: {
+              id: listId,
+            },
+          },
+        },
+      });
+
+      await actions.updateList({ commit: () => {}, state: createState(), dispatch }, { listId });
+
+      expect(dispatch.mock.calls).toEqual([['fetchItemsForList', { listId }]]);
+    });
+  });
+
+  describe('when state has list items', () => {
+    it('doesnt call fetchItemsByList', async () => {
+      const commit = jest.fn();
+      const dispatch = jest.fn();
+
+      jest.spyOn(gqlClient, 'mutate').mockResolvedValue({
+        data: {
+          updateBoardList: {
+            errors: [],
+            list: {
+              id: listId,
+            },
+          },
+        },
+      });
+
+      await actions.updateList(
+        { commit, state: createState({ [listId]: [] }), dispatch },
+        { listId },
+      );
+
+      expect(dispatch.mock.calls).toEqual([]);
+    });
+  });
+
   it('should commit UPDATE_LIST_FAILURE mutation when API returns an error', (done) => {
     jest.spyOn(gqlClient, 'mutate').mockResolvedValue({
       data: {
@@ -502,19 +559,10 @@ describe('updateList', () => {
       },
     });
 
-    const state = {
-      fullPath: 'gitlab-org',
-      fullBoardId: 'gid://gitlab/Board/1',
-      boardType: 'group',
-      disabled: false,
-      boardLists: [{ type: 'closed' }],
-      issuableType: issuableTypes.issue,
-    };
-
     testAction(
       actions.updateList,
       { listId: 'gid://gitlab/List/1', position: 1 },
-      state,
+      createState(),
       [{ type: types.UPDATE_LIST_FAILURE }],
       [],
       done,