Merge branch '349169-update-security-configuration-tabs-to-utilize-lazy-loading' into 'master'

Update security configuration tabs to utilize lazy loading

See merge request gitlab-org/gitlab!77280

app/assets/javascripts/security_configuration/components/app.vue

@@ -163,7 +163,7 @@ export default {
       </template>
     </user-callout-dismisser>
 
-    <gl-tabs content-class="gl-pt-0" sync-active-tab-with-query-params>
+    <gl-tabs content-class="gl-pt-0" sync-active-tab-with-query-params lazy>
       <gl-tab
         data-testid="security-testing-tab"
         :title="$options.i18n.securityTesting"

spec/frontend/security_configuration/components/app_spec.js

@@ -159,6 +159,10 @@ describe('App component', () => {
         expect(findGlTabs().props('syncActiveTabWithQueryParams')).toBe(true);
       });
 
+      it('lazy loads each tab', () => {
+        expect(findGlTabs().attributes('lazy')).not.toBe(undefined);
+      });
+
       it('renders correct amount of tabs', () => {
         expect(findTabs()).toHaveLength(expectedTabs.length);
       });