Define if/when pipeline-graph tab in the pipeline editor should stay mounted after being hidden
Description
By default, vue-bootsrap
mounts all tabs when the tabs component is rendered. (This caused some issues in the behavior of the editor lite, as the tabs that was not yet visible was used to calculate the size of the editor).
Tabs can be set as lazy
, which makes them mount
/"dismount"
every time they are shown/hidden.
However, there is no "intermediate" setting that lets our tab be lazily rendered, and then stick after they are hidden. This can be solved with this code:
<gl-tab :title="$options.i18n.tabEdit" :lazy="!editorIsReady">
<!-- editor should be mounted only once, when the tab is displayed -->
<text-editor v-model="contentModel" @editor-ready="editorIsReady = true" />
</gl-tab>
As we have other tabs like the pipeline-editor graph could benefits:
- Mount only when the tab is show, gaining performance
- Delay loading of scripts that are contained in a tab
Possible solutions
- Contribute an alternative lazy implementation to tabs in
gitlab-ui
- Create a small tab component in pipeline_editor that wraps the
gl-tab
component - Use
<keep-alive>
- A combination of the above
Actionable items
- The pipeline graph should only be mounted once the tab has been selected.
- The editor graph should only be mounted once the tab has been selected.
Original Discussion
The following discussion from !47083 (merged) should be addressed:
-
@sarahghp started a discussion: (+3 comments) Should this also be
lazy
?
Edited by Miguel Rincon