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
Merge request reports
Activity
added auto updated bugperformance devopsverify frontend grouppipeline authoring sectionops + 1 deleted label
added 1 commit
- 5a4e2b98 - wrapper for gl-tab to lazily load contents once
1 Message CHANGELOG missing: If you want to create a changelog entry for GitLab FOSS, run the following:
bin/changelog -m 49704 "Wrapper for gl-tab to lazily load contents once"
If you want to create a changelog entry for GitLab EE, run the following instead:
bin/changelog --ee -m 49704 "Wrapper for gl-tab to lazily load contents once"
If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.
Reviewer roulette
Changes that require review have been detected! A merge request is normally reviewed by both a reviewer and a maintainer in its primary category (e.g. frontend or backend), and by a maintainer in all other categories.
To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited, or the chosen person is unavailable.
To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.
Once you've decided who will review this merge request, mention them as you normally would! Danger does not automatically notify them for you.
Category Reviewer Maintainer frontend Fernando Arias ( @farias-gl
) (UTC-6, 7 hours behind@mrincon
)Martin Wortschack ( @wortschi
) (UTC+1, same timezone as@mrincon
)If needed, you can retry the
danger-review
job that generated this comment.Generated by
DangerEdited by 🤖 GitLab Bot 🤖- Resolved by Miguel Rincon
Bundle size analysis [beta]
This compares changes in bundle size for entry points between the commits 457228c4 and 479abcc3
Special assetsEntrypoint / Name Size before Size after Diff Diff in percent average 3.04 MB 3.04 MB - 0.0 % mainChunk 1.89 MB 1.89 MB - 0.0 %
Please look at the full report for more details
Read more about how this report works.
Generated by
DangerEdited by 🤖 GitLab Bot 🤖removed auto updated label
added 1 commit
- aba16637 - Wrapper for gl-tab to lazily load contents once
mentioned in issue #285473
assigned to @mrincon
added 1202 commits
-
aba16637...f3ae0269 - 1201 commits from branch
master
- f74645a8 - Add tab wrapper to lazily mount content only once
-
aba16637...f3ae0269 - 1201 commits from branch
- Resolved by Nicolò Maria Mezzopera
@nmezzopera I would like get your feedback on this idea, I have done a few iterations of solution and I hope you can take a look, feel free to ping me directly if you want to discuss/pair in more detail.
assigned to @nmezzopera
- Resolved by Miguel Rincon
- Resolved by Miguel Rincon
- Resolved by Nicolò Maria Mezzopera
unassigned @nmezzopera
- Resolved by Miguel Rincon
@f_caplette please help me take a look as you have been working on the tabs, thanks a lot.
assigned to @f_caplette
assigned to @farias-gl and unassigned @f_caplette
unassigned @mrincon
added 1 commit
- 75876a09 - Add tab wrapper to lazily mount content only once
mentioned in merge request !48901 (merged)
mentioned in issue #295203 (closed)
- Resolved by -
- Resolved by Nicolò Maria Mezzopera
@mrincon the feedback I left back doesn't really request you to change anything. It more or captures what I discovered in the process of trying to understand this MR.
My only suggestion is to create a follow-up issue just to track the possibility of moving it to gitlab-ui at a later date. I think we are ok for now. The moment we use the component in two+ places I think it might benefit to move to gitlab-ui.
Great work!
assigned to @mrincon
unassigned @farias-gl
mentioned in issue #295272
added 340 commits
-
75876a09...12f8692c - 339 commits from branch
master
- 963e8811 - Add tab wrapper to lazily mount content only once
-
75876a09...12f8692c - 339 commits from branch
added 1 commit
- eff8130f - Add tab wrapper to lazily mount content only once
assigned to @farias-gl and unassigned @mrincon
added 21 commits
-
eff8130f...6d000535 - 20 commits from branch
master
- aff36e60 - Add tab wrapper to lazily mount content only once
-
eff8130f...6d000535 - 20 commits from branch
added 16 commits
-
aff36e60...ae5bc2d1 - 15 commits from branch
master
- 4bc220ba - Add tab wrapper to lazily mount content only once
-
aff36e60...ae5bc2d1 - 15 commits from branch
assigned to @nmezzopera
unassigned @farias-gl
requested review from @nmezzopera
added 102 commits
-
4bc220ba...b8ea66a5 - 101 commits from branch
master
- 3cd408fd - Add tab wrapper to lazily mount content only once
-
4bc220ba...b8ea66a5 - 101 commits from branch
added typemaintenance label
added typefeature label
changed milestone to %13.8
marked the checklist item Code review guidelines as completed