Add lazy loading for pipelines and dag tabs
What does this MR do and why?
In the effort to release the Vue pipeline tabs, we are now adding lazy loading to pipelines and dag tab. This will prevent unnecessary vue computations and graphql queries to execute when loading a different tab.
Screenshots or screen recordings
Before | After |
---|---|
Screen_Recording_2022-09-19_at_2.30.05_PM | Screen_Recording_2022-09-19_at_2.26.57_PM |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
- Enable the pipeline tabs ff in the ruby console
Feature.enable(:pipeline_tabs_vue)
- Go on any pipeline page
- Once arrived, add a query param to the url to simulate getting redirected tto a specific tab like so:
?tab=builds
(so your full url would look something like:gdk.test:3000/root/big-pipeline/-/pipelines/1?tab=builds
) - Open the network tab
- Load the page
- Click on the pipeline tab
- Notice that the pipeline tab is now loading!
🎉 - Notice that a new graphql query was sent
- Repeat steps to load a different tab
- Click on the
needs
tab - Notice that the needs page is loading
- Notice that a new graphql query was fired
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.