Moves the Initialisation of the frequent Item Dropdowns to Idle Callback

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

@@ -47,6 +47,11 @@ export default {
     }
 
     eventHub.$on(`${this.namespace}-dropdownOpen`, this.dropdownOpenHandler);
+
+    // As we init it through requestIdleCallback it could be that the dropdown is already open
+    if (document.getElementById(`nav-${this.namespace}-dropdown`).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', () => {
+function 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);
 });