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.

1. Enable the pipeline tabs ff in the ruby console

   Feature.enable(:pipeline_tabs_vue)

2. Go on any pipeline page
3. 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)
4. Open the network tab
5. Load the page
6. Click on the pipeline tab
7. Notice that the pipeline tab is now loading! 🎉
8. Notice that a new graphql query was sent
9. Repeat steps to load a different tab
10. Click on the needs tab
11. Notice that the needs page is loading
12. 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.