Do not display the export button while loading

ee/app/assets/javascripts/security_dashboard/components/first_class_instance_security_dashboard.vue

@@ -102,7 +102,7 @@ export default {
       <header class="page-title-holder flex-fill d-flex align-items-center">
         <h2 class="page-title flex-grow">{{ s__('SecurityReports|Security Dashboard') }}</h2>
         <csv-export-button
-          v-if="!shouldShowEmptyState"
+          v-if="shouldShowDashboard"
           :vulnerabilities-export-endpoint="vulnerabilitiesExportEndpoint"
         />
         <gl-button

ee/changelogs/unreleased/228891-fix-export-button-showing-up-while-loading.yml

+---
+title: Do not display the export button while projects are loading
+merge_request: 37573
+author:
+type: fixed

ee/spec/frontend/security_dashboard/components/first_class_instance_security_dashboard_spec.js

@@ -13,7 +13,9 @@ import DashboardNotConfigured from 'ee/security_dashboard/components/empty_state
 describe('First Class Instance Dashboard Component', () => {
   let wrapper;
 
-  const defaultMocks = { $apollo: { queries: { projects: { loading: false } } } };
+  const defaultMocks = ({ loading = false } = {}) => ({
+    $apollo: { queries: { projects: { loading } } },
+  });
 
   const vulnerableProjectsEndpoint = '/vulnerable/projects';
   const vulnerabilitiesExportEndpoint = '/vulnerabilities/exports';
@@ -26,12 +28,12 @@ describe('First Class Instance Dashboard Component', () => {
   const findEmptyState = () => wrapper.find(DashboardNotConfigured);
   const findFilters = () => wrapper.find(Filters);
 
-  const createWrapper = ({ data = {}, stubs }) => {
+  const createWrapper = ({ data = {}, stubs, mocks = defaultMocks() }) => {
     return shallowMount(FirstClassInstanceDashboard, {
       data() {
         return { ...data };
       },
-      mocks: { ...defaultMocks },
+      mocks,
       propsData: {
         vulnerableProjectsEndpoint,
         vulnerabilitiesExportEndpoint,
@@ -91,15 +93,26 @@ describe('First Class Instance Dashboard Component', () => {
     });
   });
 
+  describe('when loading projects', () => {
+    beforeEach(() => {
+      wrapper = createWrapper({
+        mocks: defaultMocks({ loading: true }),
+        data: {
+          projects: [{ id: 1 }],
+        },
+      });
+    });
+
+    it('does not render the export button', () => {
+      expect(findCsvExportButton().exists()).toBe(false);
+    });
+  });
+
   describe('when uninitialized', () => {
     beforeEach(() => {
       wrapper = createWrapper({
         data: {
           isManipulatingProjects: false,
-          stubs: {
-            DashboardNotConfigured,
-            GlButton,
-          },
         },
       });
     });