Wrapper for gl-tab to lazily load contents once
Compare changes
Files
4- Miguel Rincon authored
This change adds a new component that mounts contents inside tabs lazily, without dismoounting them.
+ 68
− 0
Proposed solution for #285473
Two tabs in our editor require rendering large amounts of DOM elements: The editor tab, which depends on EditorLite
and the visualization tab, which renders the pipeline graph.
They both calculate their size depending on the wrapping component, which can be problematic when using tabs: by default, hidden tabs are mounted
along with their contents while hidden
, which prevents correctly calculating the size of a container.
Use gl-tab
's lazy
prop to render the component only when it is shown. This works in some cases, but it also dismounts the contents when the tab is not visible. This is undesirable as components like the editor should only be hidden
and not fully dismounted every time they are hidden.
We used lazy in some creative ways to change it's behavior, but this is proving confusing.
Define a new wrapper for the gl-tab
component that is lazy and stays mounted after being hidden.
As a test I added a "fake" tab, to see when the other two components in the tab would get created()
and mounted()
:
diff --git a/app/assets/javascripts/pipeline_editor/components/text_editor.vue b/app/assets/javascripts/pipeline_editor/components/text_editor.vue
index 22f2a32c9ac..c6d96f2d445 100644
--- a/app/assets/javascripts/pipeline_editor/components/text_editor.vue
+++ b/app/assets/javascripts/pipeline_editor/components/text_editor.vue
@@ -5,6 +5,12 @@ export default {
components: {
EditorLite,
},
+ created() {
+ console.log('text-editor created()');
+ },
+ mounted() {
+ console.log('text-editor mounted()');
+ },
};
</script>
<template>
diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
index c9460a3fe5a..a7c9c345910 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
@@ -251,6 +251,16 @@ export default {
<gl-loading-icon v-if="isBlobContentLoading" size="lg" class="gl-m-3" />
<div v-else class="file-editor gl-mb-3">
<gl-tabs>
+ <editor-lazy-tab :title="'Empty for testing'">
+ <pre>
+
+
+ Empty contents
+
+
+ </pre>
+ </editor-lazy-tab>
+
<editor-lazy-tab :title="$options.i18n.tabEdit">
<text-editor v-model="contentModel" />
</editor-lazy-tab>
diff --git a/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue
index 11ad2f2a3b6..93a146a7654 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue
@@ -79,7 +79,11 @@ export default {
return [];
},
},
+ created() {
+ console.log('pipeline-graph created()');
+ },
mounted() {
+ console.log('pipeline-graph mounted()');
if (!this.isPipelineDataEmpty) {
this.getGraphDimensions();
this.drawJobLinks();
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
@gitlab-com/gl-security/appsec
This change adds a new component that mounts contents inside tabs lazily, without dismoounting them.