Code splitting for Status Modal

Converted Trigger to Vanilla JS
Moved Dropdown Tracking into IdleCallback
Optimized Status Modal Import

Added Subelement for Status Modal Wrapper

app/assets/javascripts/header.js

@@ -2,9 +2,6 @@ import $ from 'jquery';
 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
 import { highCountTrim } from '~/lib/utils/text_utility';
-import SetStatusModalTrigger from './set_status_modal/set_status_modal_trigger.vue';
-import SetStatusModalWrapper from './set_status_modal/set_status_modal_wrapper.vue';
-import { parseBoolean } from '~/lib/utils/common_utils';
 import Tracking from '~/tracking';
 
 /**
@@ -26,51 +23,43 @@ export default function initTodoToggle() {
 
 function initStatusTriggers() {
   const setStatusModalTriggerEl = document.querySelector('.js-set-status-modal-trigger');
-  const setStatusModalWrapperEl = document.querySelector('.js-set-status-modal-wrapper');
 
-  if (setStatusModalTriggerEl || setStatusModalWrapperEl) {
-    Vue.use(Translate);
+  if (setStatusModalTriggerEl) {
+    setStatusModalTriggerEl.addEventListener('click', () => {
+      import(
+        /* webpackChunkName: 'statusModalBundle' */ './set_status_modal/set_status_modal_wrapper.vue'
+      )
+        .then(({ default: SetStatusModalWrapper }) => {
+          const setStatusModalWrapperEl = document.querySelector('.js-set-status-modal-wrapper');
+          const statusModalElement = document.createElement('div');
+          setStatusModalWrapperEl.appendChild(statusModalElement);
 
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: setStatusModalTriggerEl,
-      data() {
-        const { hasStatus } = this.$options.el.dataset;
+          Vue.use(Translate);
 
-        return {
-          hasStatus: parseBoolean(hasStatus),
-        };
-      },
-      render(createElement) {
-        return createElement(SetStatusModalTrigger, {
-          props: {
-            hasStatus: this.hasStatus,
-          },
-        });
-      },
-    });
-
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: setStatusModalWrapperEl,
-      data() {
-        const { currentEmoji, currentMessage } = this.$options.el.dataset;
+          // eslint-disable-next-line no-new
+          new Vue({
+            el: statusModalElement,
+            data() {
+              const { currentEmoji, currentMessage } = setStatusModalWrapperEl.dataset;
 
-        return {
-          currentEmoji,
-          currentMessage,
-        };
-      },
-      render(createElement) {
-        const { currentEmoji, currentMessage } = this;
+              return {
+                currentEmoji,
+                currentMessage,
+              };
+            },
+            render(createElement) {
+              const { currentEmoji, currentMessage } = this;
 
-        return createElement(SetStatusModalWrapper, {
-          props: {
-            currentEmoji,
-            currentMessage,
-          },
-        });
-      },
+              return createElement(SetStatusModalWrapper, {
+                props: {
+                  currentEmoji,
+                  currentMessage,
+                },
+              });
+            },
+          });
+        })
+        .catch(() => {});
     });
   }
 }
@@ -101,5 +90,5 @@ export function initNavUserDropdownTracking() {
 
 document.addEventListener('DOMContentLoaded', () => {
   requestIdleCallback(initStatusTriggers);
-  initNavUserDropdownTracking();
+  requestIdleCallback(initNavUserDropdownTracking);
 });

app/assets/javascripts/set_status_modal/event_hub.js

-import createEventHub from '~/helpers/event_hub_factory';
-
-export default createEventHub();

app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue

-<script>
-import { s__ } from '~/locale';
-import eventHub from './event_hub';
-
-export default {
-  props: {
-    hasStatus: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  computed: {
-    buttonText() {
-      return this.hasStatus ? s__('SetStatusModal|Edit status') : s__('SetStatusModal|Set status');
-    },
-  },
-  methods: {
-    openModal() {
-      eventHub.$emit('openModal');
-    },
-  },
-};
-</script>
-
-<template>
-  <button type="button" class="btn menu-item" @click="openModal">{{ buttonText }}</button>
-</template>

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

@@ -6,7 +6,6 @@ import { GlModal, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { __, s__ } from '~/locale';
 import Api from '~/api';
-import eventHub from './event_hub';
 import EmojiMenuInModal from './emoji_menu_in_modal';
 import * as Emoji from '~/emoji';
 
@@ -48,15 +47,12 @@ export default {
     },
   },
   mounted() {
-    eventHub.$on('openModal', this.openModal);
+    this.$root.$emit('bv::show::modal', this.modalId);
   },
   beforeDestroy() {
     this.emojiMenu.destroy();
   },
   methods: {
-    openModal() {
-      this.$root.$emit('bv::show::modal', this.modalId);
-    },
     closeModal() {
       this.$root.$emit('bv::hide::modal', this.modalId);
     },

app/views/layouts/header/_current_user_dropdown.html.haml

@@ -14,7 +14,11 @@
   %li.divider
   - if can?(current_user, :update_user_status, current_user)
     %li
-      .js-set-status-modal-trigger{ data: { has_status: current_user.status.present? ? 'true' : 'false' } }
+      %button.btn.menu-item.js-set-status-modal-trigger{ type: 'button' }
+        - if current_user.status.present?
+          = s_('SetStatusModal|Edit status')
+        - else
+          = s_('SetStatusModal|Set status')
   - if current_user_menu?(:profile)
     %li
       = link_to s_("CurrentUser|Profile"), current_user, class: 'profile-link', data: { user: current_user.username }