Wrapper for gl-tab to lazily load contents once

What does this MR do?

Proposed solution for #285473

Background

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.

Previous Solution

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.

Proposed solution

Define a new wrapper for the gl-tab component that is lazy and stays mounted after being hidden.

Screenshots (strongly suggested)

As a test I added a "fake" tab, to see when the other two components in the tab would get created() and mounted():

diff of test (slightly out of date, `editor-lazy-tab` was renamed to `editor-tab`)

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();

Does this MR meet the acceptance criteria?

Conformity

• [-] Changelog entry
• [-] Documentation (if required)
• Code review guidelines
• Merge request performance guidelines
• Style guides
• [-] Database guides
• Separation of EE specific content

Availability and Testing

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• Tested in all supported browsers
• Informed Infrastructure department of a default or new setting change, if applicable per definition of done

Security

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:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• Security reports checked/validated by a reviewer from the AppSec team