Only load codequality report when tab is active

Pattern copied from JUnit test reports tab

ee/app/assets/javascripts/pages/projects/pipelines/show/codequality_report.js

@@ -6,13 +6,30 @@ import createStore from 'ee/codequality_report/store';
 Vue.use(Translate);
 
 export default () => {
+  const tabsElement = document.querySelector('.pipelines-tabs');
   const codequalityTab = document.getElementById('js-pipeline-codequality-report');
 
-  if (codequalityTab) {
+  if (tabsElement && codequalityTab) {
+    const fetchReportAction = 'fetchReport';
     const { codequalityReportDownloadPath, blobPath } = codequalityTab.dataset;
-
     const store = createStore({ endpoint: codequalityReportDownloadPath, blobPath });
-    store.dispatch('fetchReport');
+
+    const isCodequalityTabActive = Boolean(
+      document.querySelector('.pipelines-tabs > li > a.codequality-tab.active'),
+    );
+
+    if (isCodequalityTabActive) {
+      store.dispatch(fetchReportAction);
+    } else {
+      const tabClickHandler = e => {
+        if (e.target.className === 'codequality-tab') {
+          store.dispatch(fetchReportAction);
+          tabsElement.removeEventListener('click', tabClickHandler);
+        }
+      };
+
+      tabsElement.addEventListener('click', tabClickHandler);
+    }
 
     // eslint-disable-next-line no-new
     new Vue({