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

2 files changed, 11 insertions, 1 deletions

diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue
index 63531f1f246..968e255e1fc 100644
--- a/app/assets/javascripts/frequent_items/components/app.vue
+++ b/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);
diff --git a/app/assets/javascripts/frequent_items/index.js b/app/assets/javascripts/frequent_items/index.js
index 5157ff211dc..6263acbab8e 100644
--- a/app/assets/javascripts/frequent_items/index.js
+++ b/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);
 });