Load dynamic chunk only when dropdown is open

app/assets/javascripts/frequent_items/index.js

@@ -28,41 +28,40 @@ export default function initFrequentItemDropdowns() {
       return;
     }
 
-    $(navEl).on('shown.bs.dropdown', () => {
-      eventHub.$emit(`${namespace}-dropdownOpen`);
-    });
+    $(navEl).on('shown.bs.dropdown', () =>
+      import('./components/app.vue').then(({ default: FrequentItems }) => {
+        // eslint-disable-next-line no-new
+        new Vue({
+          el,
+          data() {
+            const { dataset } = this.$options.el;
+            const item = {
+              id: Number(dataset[`${key}Id`]),
+              name: dataset[`${key}Name`],
+              namespace: dataset[`${key}Namespace`],
+              webUrl: dataset[`${key}WebUrl`],
+              avatarUrl: dataset[`${key}AvatarUrl`] || null,
+              lastAccessedOn: Date.now(),
+            };
 
-    // eslint-disable-next-line no-new
-    new Vue({
-      el,
-      components: {
-        FrequentItems: () => import('./components/app.vue'),
-      },
-      data() {
-        const { dataset } = this.$options.el;
-        const item = {
-          id: Number(dataset[`${key}Id`]),
-          name: dataset[`${key}Name`],
-          namespace: dataset[`${key}Namespace`],
-          webUrl: dataset[`${key}WebUrl`],
-          avatarUrl: dataset[`${key}AvatarUrl`] || null,
-          lastAccessedOn: Date.now(),
-        };
-
-        return {
-          currentUserName: dataset.userName,
-          currentItem: item,
-        };
-      },
-      render(createElement) {
-        return createElement('frequent-items', {
-          props: {
-            namespace,
-            currentUserName: this.currentUserName,
-            currentItem: this.currentItem,
+            return {
+              currentUserName: dataset.userName,
+              currentItem: item,
+            };
+          },
+          render(createElement) {
+            return createElement(FrequentItems, {
+              props: {
+                namespace,
+                currentUserName: this.currentUserName,
+                currentItem: this.currentItem,
+              },
+            });
           },
         });
-      },
-    });
+
+        eventHub.$emit(`${namespace}-dropdownOpen`);
+      }),
+    );
   });
 }