Merge branch '339125-display-no-artifacts-message-only-when-not-loading' into 'master'

Only render "No artifacts found" when not loading

See merge request !68843

app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue

@@ -100,7 +100,7 @@ export default {
 
     <gl-loading-icon v-if="isLoading" size="sm" />
 
-    <gl-dropdown-item v-if="!artifacts.length" data-testid="artifacts-empty-message">
+    <gl-dropdown-item v-if="!artifacts.length && !isLoading" data-testid="artifacts-empty-message">
       {{ $options.i18n.emptyArtifactsMessage }}
     </gl-dropdown-item>
 

spec/frontend/pipelines/pipeline_multi_actions_spec.js

-import { GlAlert, GlDropdown, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlDropdown, GlSprintf, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -51,6 +51,7 @@ describe('Pipeline Multi Actions Dropdown', () => {
 
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findAllArtifactItems = () => wrapper.findAllByTestId(artifactItemTestId);
   const findFirstArtifactItem = () => wrapper.findByTestId(artifactItemTestId);
   const findEmptyMessage = () => wrapper.findByTestId('artifacts-empty-message');
@@ -103,6 +104,15 @@ describe('Pipeline Multi Actions Dropdown', () => {
       expect(findEmptyMessage().exists()).toBe(true);
     });
 
+    describe('while loading artifacts', () => {
+      it('should render a loading spinner and no empty message', () => {
+        createComponent({ mockData: { isLoading: true, artifacts: [] } });
+
+        expect(findLoadingIcon().exists()).toBe(true);
+        expect(findEmptyMessage().exists()).toBe(false);
+      });
+    });
+
     describe('with a failing request', () => {
       it('should render an error message', async () => {
         const endpoint = artifactsEndpoint.replace(artifactsEndpointPlaceholder, pipelineId);