Merge branch '301221-fix-loading-issue-banner' into 'master'

Fix mounted event issues on invite members banner

See merge request gitlab-org/gitlab!54826

app/assets/javascripts/pages/groups/show/index.js

 import leaveByUrl from '~/namespaces/leave_by_url';
 import initGroupDetails from '../shared/group_details';
 
-document.addEventListener('DOMContentLoaded', () => {
-  leaveByUrl('group');
-  initGroupDetails();
-});
+leaveByUrl('group');
+initGroupDetails();

app/assets/javascripts/tracking.js

@@ -61,30 +61,51 @@ const eventHandlers = (category, func) => {
   return handlers;
 };
 
+const dispatchEvent = (category = document.body.dataset.page, action = 'generic', data = {}) => {
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  if (!category) throw new Error('Tracking: no category provided for tracking.');
+
+  const { label, property, value } = data;
+  const contexts = [STANDARD_CONTEXT];
+
+  if (data.context) {
+    contexts.push(data.context);
+  }
+
+  return window.snowplow('trackStructEvent', category, action, label, property, value, contexts);
+};
+
 export default class Tracking {
+  static queuedEvents = [];
+  static initialized = false;
+
   static trackable() {
     return !['1', 'yes'].includes(
       window.doNotTrack || navigator.doNotTrack || navigator.msDoNotTrack,
     );
   }
 
+  static flushPendingEvents() {
+    this.initialized = true;
+
+    while (this.queuedEvents.length) {
+      dispatchEvent(...this.queuedEvents.shift());
+    }
+  }
+
   static enabled() {
     return typeof window.snowplow === 'function' && this.trackable();
   }
 
-  static event(category = document.body.dataset.page, action = 'generic', data = {}) {
+  static event(...eventData) {
     if (!this.enabled()) return false;
-    // eslint-disable-next-line @gitlab/require-i18n-strings
-    if (!category) throw new Error('Tracking: no category provided for tracking.');
 
-    const { label, property, value } = data;
-    const contexts = [STANDARD_CONTEXT];
-
-    if (data.context) {
-      contexts.push(data.context);
+    if (!this.initialized) {
+      this.queuedEvents.push(eventData);
+      return false;
     }
 
-    return window.snowplow('trackStructEvent', category, action, label, property, value, contexts);
+    return dispatchEvent(...eventData);
   }
 
   static bindDocument(category = document.body.dataset.page, parent = document) {
@@ -143,6 +164,7 @@ export function initUserTracking() {
   window.snowplow('newTracker', opts.namespace, opts.hostname, opts);
 
   document.dispatchEvent(new Event('SnowplowInitialized'));
+  Tracking.flushPendingEvents();
 }
 
 export function initDefaultTrackers() {

spec/frontend/tracking_spec.js

@@ -149,6 +149,27 @@ describe('Tracking', () => {
     });
   });
 
+  describe('.flushPendingEvents', () => {
+    it('flushes any pending events', () => {
+      Tracking.initialized = false;
+      Tracking.event('_category_', '_eventName_', { label: '_label_' });
+
+      expect(snowplowSpy).not.toHaveBeenCalled();
+
+      Tracking.flushPendingEvents();
+
+      expect(snowplowSpy).toHaveBeenCalledWith(
+        'trackStructEvent',
+        '_category_',
+        '_eventName_',
+        '_label_',
+        undefined,
+        undefined,
+        [STANDARD_CONTEXT],
+      );
+    });
+  });
+
   describe('tracking interface events', () => {
     let eventSpy;