Add a loading state for branch rule query

Changelog: fixed

app/assets/javascripts/projects/settings/repository/branch_rules/app.vue

@@ -166,6 +166,7 @@ export default {
     icon="branch"
     :count="branchRules.length"
     class="gl-mb-5"
+    :is-loading="$apollo.queries.branchRules.loading"
   >
     <template #actions>
       <gl-disclosure-dropdown

scripts/frontend/quarantined_vue3_specs.txt

@@ -314,7 +314,6 @@ spec/frontend/projects/components/new_edit_form_spec.js
 spec/frontend/projects/new/components/new_project_url_select_spec.js
 spec/frontend/projects/report_abuse/components/report_abuse_dropdown_item_spec.js
 spec/frontend/projects/settings/components/branch_rule_modal_spec.js
-spec/frontend/projects/settings/repository/branch_rules/app_spec.js
 spec/frontend/projects/settings/topics/components/topics_token_selector_spec.js
 spec/frontend/projects/settings_service_desk/components/custom_email_form_spec.js
 spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js

spec/frontend/projects/settings/repository/branch_rules/app_spec.js

@@ -7,6 +7,7 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { useMockInternalEventsTracking } from 'helpers/tracking_internal_events_helper';
+import CrudComponent from '~/vue_shared/components/crud_component.vue';
 import BranchRules from '~/projects/settings/repository/branch_rules/app.vue';
 import BranchRule from '~/projects/settings/repository/branch_rules/components/branch_rule.vue';
 import branchRulesQuery from 'ee_else_ce/projects/settings/repository/branch_rules/graphql/queries/branch_rules.query.graphql';
@@ -84,10 +85,11 @@ describe('Branch rules app', () => {
   const findModal = () => wrapper.findComponent(GlModal);
   const findAddBranchRuleDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
   const findCreateBranchRuleListbox = () => wrapper.findComponent(GlCollapsibleListbox);
+  const findCrudComponent = () => wrapper.findComponent(CrudComponent);
 
-  beforeEach(() => {
+  beforeEach(async () => {
     setWindowLocation(TEST_HOST);
-    createComponent();
+    await createComponent();
   });
 
   it('renders branch rules', async () => {
@@ -111,6 +113,13 @@ describe('Branch rules app', () => {
     expect(createAlert).toHaveBeenCalledWith({ message: I18N.queryError });
   });
 
+  it('displays a loading state if branch rules query is pending', async () => {
+    createComponent({ queryHandler: jest.fn() });
+    expect(findCrudComponent().props('isLoading')).toBe(true);
+    await waitForPromises();
+    expect(findCrudComponent().props('isLoading')).toBe(false);
+  });
+
   it('displays an empty state if no branch rules are present', async () => {
     await createComponent({ queryHandler: jest.fn().mockRejectedValue() });
     expect(findEmptyState().text()).toBe(I18N.emptyState);
@@ -157,7 +166,9 @@ describe('Branch rules app', () => {
     });
 
     it('shows alert when mutation fails', async () => {
-      createComponent({ mutationHandler: jest.fn().mockRejectedValue() });
+      await createComponent({
+        mutationHandler: jest.fn().mockRejectedValue(),
+      });
       findCreateBranchRuleListbox().vm.$emit('select', 'main');
       await nextTick();
       findModal().vm.$emit('primary');
@@ -223,8 +234,10 @@ describe('Branch rules app', () => {
   });
 
   describe('Add branch rule when editBranchRules FF disabled', () => {
-    beforeEach(() => {
-      createComponent({ glFeatures: { editBranchRules: false } });
+    beforeEach(async () => {
+      await createComponent({
+        glFeatures: { editBranchRules: false },
+      });
     });
     it('renders an Add branch rule button', () => {
       expect(findAddBranchRuleButton().exists()).toBe(true);