Add latest changes from gitlab-org/gitlab@master

4 files changed, 51 insertions, 38 deletions

diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 54365df2119..e1d2895831a 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -1,6 +1,5 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import {
   WEBIDE_MARK_APP_START,
@@ -14,15 +13,8 @@ import {
 import { performanceMarkAndMeasure } from '~/performance/utils';
 import { modalTypes } from '../constants';
 import eventHub from '../eventhub';
-import FindFile from '~/vue_shared/components/file_finder/index.vue';
-import NewModal from './new_dropdown/modal.vue';
 import IdeSidebar from './ide_side_bar.vue';
-import RepoTabs from './repo_tabs.vue';
-import IdeStatusBar from './ide_status_bar.vue';
 import RepoEditor from './repo_editor.vue';
-import RightPane from './panes/right.vue';
-import ErrorMessage from './error_message.vue';
-import CommitEditorHeader from './commit_sidebar/editor_header.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import { measurePerformance } from '../utils';
@@ -43,19 +35,24 @@ eventHub.$on(WEBIDE_MEASURE_FILE_AFTER_INTERACTION, () =>
 
 export default {
   components: {
-    NewModal,
     IdeSidebar,
-    RepoTabs,
-    IdeStatusBar,
     RepoEditor,
-    FindFile,
-    ErrorMessage,
-    CommitEditorHeader,
-    GlButton,
-    GlLoadingIcon,
-    RightPane,
+    'error-message': () => import('./error_message.vue'),
+    'gl-button': () => import('@gitlab/ui/src/components/base/button/button.vue'),
+    'gl-loading-icon': () => import('@gitlab/ui/src/components/base/loading_icon/loading_icon.vue'),
+    'commit-editor-header': () => import('./commit_sidebar/editor_header.vue'),
+    'repo-tabs': () => import('./repo_tabs.vue'),
+    'ide-status-bar': () => import('./ide_status_bar.vue'),
+    'find-file': () => import('~/vue_shared/components/file_finder/index.vue'),
+    'right-pane': () => import('./panes/right.vue'),
+    'new-modal': () => import('./new_dropdown/modal.vue'),
   },
   mixins: [glFeatureFlagsMixin()],
+  data() {
+    return {
+      loadDeferred: false,
+    };
+  },
   computed: {
     ...mapState([
       'openFiles',
@@ -107,6 +104,9 @@ export default {
     createNewFile() {
       this.$refs.newModal.open(modalTypes.blob);
     },
+    loadDeferredComponents() {
+      this.loadDeferred = true;
+    },
   },
 };
 </script>
@@ -118,19 +118,23 @@ export default {
   >
     <error-message v-if="errorMessage" :message="errorMessage" />
     <div class="ide-view flex-grow d-flex">
-      <find-file
-        v-show="fileFindVisible"
-        :files="allBlobs"
-        :visible="fileFindVisible"
-        :loading="loading"
-        @toggle="toggleFileFinder"
-        @click="openFile"
-      />
-      <ide-sidebar />
+      <template v-if="loadDeferred">
+        <find-file
+          v-show="fileFindVisible"
+          :files="allBlobs"
+          :visible="fileFindVisible"
+          :loading="loading"
+          @toggle="toggleFileFinder"
+          @click="openFile"
+        />
+      </template>
+      <ide-sidebar @tree-ready="loadDeferredComponents" />
       <div class="multi-file-edit-pane">
         <template v-if="activeFile">
-          <commit-editor-header v-if="isCommitModeActive" :active-file="activeFile" />
-          <repo-tabs v-else :active-file="activeFile" :files="openFiles" :viewer="viewer" />
+          <template v-if="loadDeferred">
+            <commit-editor-header v-if="isCommitModeActive" :active-file="activeFile" />
+            <repo-tabs v-else :active-file="activeFile" :files="openFiles" :viewer="viewer" />
+          </template>
           <repo-editor :file="activeFile" class="multi-file-edit-pane-content" />
         </template>
         <template v-else>
@@ -177,9 +181,13 @@ export default {
           </div>
         </template>
       </div>
-      <right-pane v-if="currentProjectId" />
+      <template v-if="loadDeferred">
+        <right-pane v-if="currentProjectId" />
+      </template>
     </div>
-    <ide-status-bar />
-    <new-modal ref="newModal" />
+    <template v-if="loadDeferred">
+      <ide-status-bar />
+      <new-modal ref="newModal" />
+    </template>
   </article>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 53dfc133fc8..99215d6c3f1 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -4,21 +4,19 @@ import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import IdeTree from './ide_tree.vue';
 import ResizablePanel from './resizable_panel.vue';
 import ActivityBar from './activity_bar.vue';
-import RepoCommitSection from './repo_commit_section.vue';
 import CommitForm from './commit_sidebar/form.vue';
-import IdeReview from './ide_review.vue';
 import IdeProjectHeader from './ide_project_header.vue';
-import { SIDEBAR_INIT_WIDTH } from '../constants';
+import { SIDEBAR_INIT_WIDTH, leftSidebarViews } from '../constants';
 
 export default {
   components: {
     GlSkeletonLoading,
     ResizablePanel,
     ActivityBar,
-    RepoCommitSection,
     IdeTree,
+    [leftSidebarViews.review.name]: () => import('./ide_review.vue'),
+    [leftSidebarViews.commit.name]: () => import('./repo_commit_section.vue'),
     CommitForm,
-    IdeReview,
     IdeProjectHeader,
   },
   computed: {
@@ -49,7 +47,7 @@ export default {
         <div class="multi-file-commit-panel-inner" data-testid="ide-side-bar-inner">
           <div class="multi-file-commit-panel-inner-content">
             <keep-alive>
-              <component :is="currentActivityView" />
+              <component :is="currentActivityView" @tree-ready="$emit('tree-ready')" />
             </keep-alive>
           </div>
           <commit-form />
diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue
index 56fcb6c2600..e563de6659a 100644
--- a/app/assets/javascripts/ide/components/ide_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_tree.vue
@@ -51,7 +51,7 @@ export default {
 </script>
 
 <template>
-  <ide-tree-list>
+  <ide-tree-list @tree-ready="$emit('tree-ready')">
     <template #header>
       {{ __('Edit') }}
       <div class="ide-tree-actions ml-auto d-flex" data-testid="ide-root-actions">
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index d7ff1b8316f..e7e94f5b5da 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -32,6 +32,13 @@ export default {
       return !this.currentTree || this.currentTree.loading;
     },
   },
+  watch: {
+    showLoading(newVal) {
+      if (!newVal) {
+        this.$emit('tree-ready');
+      }
+    },
+  },
   beforeCreate() {
     performanceMarkAndMeasure({ mark: WEBIDE_MARK_TREE_START });
   },