Keep large spinner while MR file tree is loading

app/assets/javascripts/diffs/components/app.vue

@@ -127,7 +127,13 @@ export default {
       emailPatchPath: state => state.diffs.emailPatchPath,
       retrievingBatches: state => state.diffs.retrievingBatches,
     }),
-    ...mapState('diffs', ['showTreeList', 'isLoading', 'startVersion', 'currentDiffFileId']),
+    ...mapState('diffs', [
+      'showTreeList',
+      'isLoading',
+      'startVersion',
+      'currentDiffFileId',
+      'isTreeLoaded',
+    ]),
     ...mapGetters('diffs', ['isParallelView', 'currentDiffIndex']),
     ...mapGetters(['isNotesFetched', 'getNoteableData']),
     diffs() {
@@ -400,7 +406,7 @@ export default {
 
 <template>
   <div v-show="shouldShow">
-    <div v-if="isLoading" class="loading"><gl-loading-icon size="lg" /></div>
+    <div v-if="isLoading || !isTreeLoaded" class="loading"><gl-loading-icon size="lg" /></div>
     <div v-else id="diffs" :class="{ active: shouldShow }" class="diffs tab-pane">
       <compare-versions
         :merge-request-diffs="mergeRequestDiffs"

app/assets/javascripts/diffs/store/modules/diff_state.js

@@ -15,6 +15,7 @@ const whiteSpaceFromCookie = Cookies.get(DIFF_WHITESPACE_COOKIE_NAME);
 
 export default () => ({
   isLoading: true,
+  isTreeLoaded: false,
   isBatchLoading: false,
   retrievingBatches: false,
   addedLines: null,

app/assets/javascripts/diffs/store/mutations.js

@@ -323,6 +323,7 @@ export default {
   [types.SET_TREE_DATA](state, { treeEntries, tree }) {
     state.treeEntries = treeEntries;
     state.tree = tree;
+    state.isTreeLoaded = true;
   },
   [types.SET_RENDER_TREE_LIST](state, renderTreeList) {
     state.renderTreeList = renderTreeList;

changelogs/unreleased/227588-add-loading-to-mr-tree.yml

+---
+title: Keep large spinner while MR file tree is loading
+merge_request: 36446
+author:
+type: fixed

spec/frontend/diffs/components/app_spec.js

@@ -41,6 +41,7 @@ describe('diffs/components/app', () => {
 
     store = createDiffsStore();
     store.state.diffs.isLoading = false;
+    store.state.diffs.isTreeLoaded = true;
 
     extendStore(store);
 

spec/frontend/diffs/components/tree_list_spec.js

@@ -17,6 +17,7 @@ describe('Diffs tree list component', () => {
     });
 
     // Setup initial state
+    store.state.diffs.isTreeLoaded = true;
     store.state.diffs.diffFiles.push('test');
     store.state.diffs = {
       addedLines: 10,

spec/frontend/diffs/store/mutations_spec.js

@@ -830,6 +830,7 @@ describe('DiffsStoreMutations', () => {
       const state = {
         treeEntries: {},
         tree: [],
+        isTreeLoaded: false,
       };
 
       mutations[types.SET_TREE_DATA](state, {
@@ -844,6 +845,7 @@ describe('DiffsStoreMutations', () => {
       });
 
       expect(state.tree).toEqual(['tree']);
+      expect(state.isTreeLoaded).toEqual(true);
     });
   });