diff options
Diffstat (limited to 'app/assets/javascripts/ide/components/ide.vue')
-rw-r--r-- | app/assets/javascripts/ide/components/ide.vue | 74 |
1 files changed, 41 insertions, 33 deletions
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue index 8f23856fd6c..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, @@ -10,19 +9,12 @@ import { WEBIDE_MEASURE_TREE_FROM_REQUEST, WEBIDE_MEASURE_FILE_FROM_REQUEST, WEBIDE_MEASURE_FILE_AFTER_INTERACTION, -} from '~/performance_constants'; -import { performanceMarkAndMeasure } from '~/performance_utils'; +} from '~/performance/constants'; +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> |