ENGCOM-9068: Optimize loading of media gallery when editing a product #32818

 - Merge Pull Request #32818 from blmage/magento2:media-gallery-loading
 - Merged commits:
   1. 5a95c20
   2. 1d6a279
   3. a7b473d

Author: magento-engcom-team

app/code/Magento/Catalog/view/adminhtml/web/js/product-gallery.js

@@ -63,10 +63,18 @@ define([
 
             this._bind();
 
+            this._isInitializingItems = true;
+            this._initializedItemCount = 0;
+            this._lastInitializedElement = null;
+
             $.each(this.options.images, $.proxy(function (index, imageData) {
                 this.element.trigger('addItem', imageData);
             }, this));
 
+            this._updateImagesRoles();
+            this._contentUpdated();
+
+            this._isInitializingItems = false;
             this.options.initialized = true;
         },
 
@@ -186,13 +194,23 @@ define([
          * @private
          */
         _addItem: function (event, imageData) {
-            var count = this.element.find(this.options.imageSelector).length,
-                element,
+            var element,
                 imgElement,
-                position = count + 1,
+                lastElement,
+                count,
+                position;
+
+            if (this._isInitializingItems) {
+                count = this._initializedItemCount++;
+                lastElement = this._lastInitializedElement;
+            } else {
+                count = this.element.find(this.options.imageSelector).length;
                 lastElement = this.element.find(this.options.imageSelector + ':last');
+            }
+
+            position = count + 1;
 
-            if (lastElement.length === 1) {
+            if (lastElement && lastElement.length === 1) {
                 position = parseInt(lastElement.data('imageData').position || count, 10) + 1;
             }
             imageData = $.extend({
@@ -214,6 +232,8 @@ define([
                 element.insertAfter(lastElement);
             }
 
+            this._lastInitializedElement = element;
+
             if (!this.options.initialized &&
                 this.options.images.length === 0 ||
                 this.options.initialized &&
@@ -235,8 +255,10 @@ define([
                 }
             }, this));
 
-            this._updateImagesRoles();
-            this._contentUpdated();
+            if (!this._isInitializingItems) {
+                this._updateImagesRoles();
+                this._contentUpdated();
+            }
         },
 
         /**