ENGCOM-7146: Move JS module initialization to separate tasks #27360

Author: slavvka

lib/web/mage/apply/main.js

@@ -22,16 +22,23 @@ define([
      */
     function init(el, config, component) {
         require([component], function (fn) {
+            var $el;
 
             if (typeof fn === 'object') {
                 fn = fn[component].bind(fn);
             }
 
             if (_.isFunction(fn)) {
-                fn(config, el);
-            } else if ($(el)[component]) {
-                $(el)[component](config);
+                fn = fn.bind(null, config, el);
+            } else {
+                $el = $(el);
+
+                if ($el[component]) {
+                    fn = $el[component].bind($el, config);
+                }
             }
+            // Init module in separate task to prevent blocking main thread.
+            setTimeout(fn);
         }, function (error) {
             if ('console' in window && typeof window.console.error === 'function') {
                 console.error(error);

lib/web/mage/bootstrap.js

@@ -16,6 +16,7 @@ define([
 
     /**
      * Init all components defined via data-mage-init attribute.
+     * Execute in a separate task to prevent main thread blocking.
      */
-    $(mage.apply);
+    setTimeout(mage.apply);
 });