Add spinner to roadmap

Roadmap did not show any indication that anything was
being loaded when it was fetching epics for the roadmap

ee/app/assets/javascripts/roadmap/components/roadmap_app.vue

 <script>
+import { GlLoadingIcon } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
-
-import epicsListEmpty from './epics_list_empty.vue';
-import roadmapShell from './roadmap_shell.vue';
+import EpicsListEmpty from './epics_list_empty.vue';
+import RoadmapShell from './roadmap_shell.vue';
 import eventHub from '../event_hub';
-
 import { EXTEND_AS } from '../constants';
 
 export default {
   components: {
-    epicsListEmpty,
-    roadmapShell,
+    EpicsListEmpty,
+    GlLoadingIcon,
+    RoadmapShell,
   },
   props: {
     presetType: {
@@ -51,9 +51,6 @@ export default {
       const last = this.timeframe.length - 1;
       return this.timeframe[last];
     },
-    showRoadmap() {
-      return !this.epicsFetchFailure && !this.epicsFetchInProgress && !this.epicsFetchResultEmpty;
-    },
   },
   mounted() {
     this.fetchEpics();
@@ -122,8 +119,19 @@ export default {
 
 <template>
   <div :class="{ 'overflow-reset': epicsFetchResultEmpty }" class="roadmap-container">
+    <gl-loading-icon v-if="epicsFetchInProgress" class="mt-4" size="md" />
+    <epics-list-empty
+      v-else-if="epicsFetchResultEmpty"
+      :preset-type="presetType"
+      :timeframe-start="timeframeStart"
+      :timeframe-end="timeframeEnd"
+      :has-filters-applied="hasFiltersApplied"
+      :new-epic-endpoint="newEpicEndpoint"
+      :empty-state-illustration-path="emptyStateIllustrationPath"
+      :is-child-epics="isChildEpics"
+    />
     <roadmap-shell
-      v-if="showRoadmap"
+      v-else-if="!epicsFetchFailure"
       :preset-type="presetType"
       :epics="epics"
       :milestones="milestones"
@@ -133,15 +141,5 @@ export default {
       @onScrollToStart="handleScrollToExtend"
       @onScrollToEnd="handleScrollToExtend"
     />
-    <epics-list-empty
-      v-if="epicsFetchResultEmpty"
-      :preset-type="presetType"
-      :timeframe-start="timeframeStart"
-      :timeframe-end="timeframeEnd"
-      :has-filters-applied="hasFiltersApplied"
-      :new-epic-endpoint="newEpicEndpoint"
-      :empty-state-illustration-path="emptyStateIllustrationPath"
-      :is-child-epics="isChildEpics"
-    />
   </div>
 </template>

ee/changelogs/unreleased/215077-add-spinner-to-roadmap.yml

+---
+title: Add spinner to roadmap
+merge_request: 31080
+author:
+type: added

ee/spec/frontend/roadmap/components/roadmap_app_spec.js

+import { GlLoadingIcon } from '@gitlab/ui';
 import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
@@ -67,35 +68,34 @@ describe('RoadmapApp', () => {
     wrapper = null;
   });
 
-  describe('when the app contains epics', () => {
-    beforeEach(() => {
-      wrapper = createComponent();
-      store.commit(types.RECEIVE_EPICS_SUCCESS, epics);
-    });
-
-    it('the roadmap is shown', () => {
-      expect(wrapper.contains(RoadmapShell)).toBe(true);
-    });
-
-    it('the empty state view is not shown', () => {
-      expect(wrapper.contains(EpicsListEmpty)).toBe(false);
-    });
-  });
+  describe.each`
+    testLabel         | epicList | showLoading | showRoadmapShell | showEpicsListEmpty
+    ${'is loading'}   | ${null}  | ${true}     | ${false}         | ${false}
+    ${'has epics'}    | ${epics} | ${false}    | ${true}          | ${false}
+    ${'has no epics'} | ${[]}    | ${false}    | ${false}         | ${true}
+  `(
+    `when epic list $testLabel`,
+    ({ epicList, showLoading, showRoadmapShell, showEpicsListEmpty }) => {
+      beforeEach(() => {
+        wrapper = createComponent();
+        if (epicList) {
+          store.commit(types.RECEIVE_EPICS_SUCCESS, epicList);
+        }
+      });
 
-  describe('when the app does not contain any epics', () => {
-    beforeEach(() => {
-      wrapper = createComponent();
-      store.commit(types.RECEIVE_EPICS_SUCCESS, []);
-    });
+      it(`loading icon is${showLoading ? '' : ' not'} shown`, () => {
+        expect(wrapper.contains(GlLoadingIcon)).toBe(showLoading);
+      });
 
-    it('the roadmap is not shown', () => {
-      expect(wrapper.contains(RoadmapShell)).toBe(false);
-    });
+      it(`roadmap is${showRoadmapShell ? '' : ' not'} shown`, () => {
+        expect(wrapper.contains(RoadmapShell)).toBe(showRoadmapShell);
+      });
 
-    it('the empty state view is shown', () => {
-      expect(wrapper.contains(EpicsListEmpty)).toBe(true);
-    });
-  });
+      it(`empty state view is${showEpicsListEmpty ? '' : ' not'} shown`, () => {
+        expect(wrapper.contains(EpicsListEmpty)).toBe(showEpicsListEmpty);
+      });
+    },
+  );
 
   describe('empty state view', () => {
     beforeEach(() => {