1 files changed, 38 insertions, 9 deletions

diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue
index 8db86d0e894..068db98a750 100644
--- a/app/assets/javascripts/boards/components/board_list_header.vue
+++ b/app/assets/javascripts/boards/components/board_list_header.vue
@@ -8,9 +8,11 @@ import {
   GlSprintf,
   GlTooltipDirective,
 } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
 import { mapActions, mapState } from 'vuex';
 import { isListDraggable } from '~/boards/boards_util';
 import { isScopedLabel, parseBoolean } from '~/lib/utils/common_utils';
+import { fetchPolicies } from '~/lib/graphql';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { n__, s__ } from '~/locale';
 import sidebarEventHub from '~/sidebar/event_hub';
@@ -18,7 +20,6 @@ import Tracking from '~/tracking';
 import { TYPE_ISSUE } from '~/issues/constants';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import listQuery from 'ee_else_ce/boards/graphql/board_lists_deferred.query.graphql';
 import setActiveBoardItemMutation from 'ee_else_ce/boards/graphql/client/set_active_board_item.mutation.graphql';
 import AccessorUtilities from '~/lib/utils/accessor';
 import {
@@ -28,8 +29,10 @@ import {
   toggleFormEventPrefix,
   updateListQueries,
   toggleCollapsedMutations,
+  listsDeferredQuery,
 } from 'ee_else_ce/boards/constants';
 import eventHub from '../eventhub';
+import { setError } from '../graphql/cache_updates';
 import ItemCount from './item_count.vue';
 
 export default {
@@ -39,6 +42,9 @@ export default {
     listSettings: s__('Boards|Edit list settings'),
     expand: s__('Boards|Expand'),
     collapse: s__('Boards|Collapse'),
+    fetchError: s__(
+      "Boards|An error occurred while fetching list's information. Please try again.",
+    ),
   },
   components: {
     GlButton,
@@ -184,8 +190,16 @@ export default {
     userCanDrag() {
       return !this.disabled && isListDraggable(this.list);
     },
+    // due to the issues with cache-and-network, we need this hack to check if there is any data for the query in the cache.
+    // if we have cached data, we disregard the loading state
     isLoading() {
-      return this.$apollo.queries.boardList.loading;
+      return (
+        this.$apollo.queries.boardList.loading &&
+        !this.$apollo.provider.clients.defaultClient.readQuery({
+          query: listsDeferredQuery[this.issuableType].query,
+          variables: this.countQueryVariables,
+        })
+      );
     },
     totalWeight() {
       return this.boardList?.totalWeight;
@@ -193,19 +207,31 @@ export default {
     canShowTotalWeight() {
       return this.weightFeatureAvailable && !this.isLoading;
     },
+    countQueryVariables() {
+      return {
+        id: this.list.id,
+        filters: this.filterParams,
+      };
+    },
   },
   apollo: {
     boardList: {
-      query: listQuery,
+      fetchPolicy: fetchPolicies.CACHE_AND_NETWORK,
+      query() {
+        return listsDeferredQuery[this.issuableType].query;
+      },
       variables() {
-        return {
-          id: this.list.id,
-          filters: this.filterParams,
-        };
+        return this.countQueryVariables;
       },
       context: {
         isSingleRequest: true,
       },
+      error(error) {
+        setError({
+          error,
+          message: this.$options.i18n.fetchError,
+        });
+      },
     },
   },
   created() {
@@ -293,8 +319,11 @@ export default {
               },
             },
           });
-        } catch {
-          this.$emit('error');
+        } catch (error) {
+          setError({
+            error,
+            message: s__('Boards|An error occurred while updating the list. Please try again.'),
+          });
         }
       } else {
         this.updateList({ listId: this.list.id, collapsed });