Merge branch...

Merge branch '56328-frequent-items-initialisations-can-be-optimised-and-deferred-in-idlecallback' into 'master'

Resolve "Frequent Items Initialisations can be optimised and deferred in idleCallback"

Closes #56328

See merge request gitlab-org/gitlab-ce!24401

app/assets/javascripts/frequent_items/components/app.vue

@@ -47,6 +47,12 @@ export default {
     }
 
     eventHub.$on(`${this.namespace}-dropdownOpen`, this.dropdownOpenHandler);
+
+    // As we init it through requestIdleCallback it could be that the dropdown is already open
+    const namespaceDropdown = document.getElementById(`nav-${this.namespace}-dropdown`);
+    if (namespaceDropdown && namespaceDropdown.classList.contains('show')) {
+      this.dropdownOpenHandler();
+    }
   },
   beforeDestroy() {
     eventHub.$off(`${this.namespace}-dropdownOpen`, this.dropdownOpenHandler);

app/assets/javascripts/frequent_items/index.js

@@ -17,7 +17,7 @@ const frequentItemDropdowns = [
   },
 ];
 
-document.addEventListener('DOMContentLoaded', () => {
+const initFrequentItemDropdowns = () => {
   frequentItemDropdowns.forEach(dropdown => {
     const { namespace, key } = dropdown;
     const el = document.getElementById(`js-${namespace}-dropdown`);
@@ -66,4 +66,8 @@ document.addEventListener('DOMContentLoaded', () => {
       },
     });
   });
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  requestIdleCallback(initFrequentItemDropdowns);
 });