ContextMenu: fix flickers when adding more items asynchronously or during runtime (T1247739) (#30317)

Author: aleksei-semikozov

packages/devextreme/js/__internal/ui/overlay/m_overlay.ts

@@ -136,8 +136,6 @@ class Overlay<
 
   _zIndex!: number;
 
-  _asyncShowTimeout?: ReturnType<typeof setTimeout> | null;
-
   _actions?: any;
 
   _isHidingActionCanceled?: boolean;
@@ -578,13 +576,7 @@ class Overlay<
         this._processShowingHidingCancel(showingArgs.cancel, applyShow, cancelShow);
       };
 
-      if (this.option('templatesRenderAsynchronously')) {
-        this._stopShowTimer();
-        // NOTE: T390360, T386038
-        this._asyncShowTimeout = setTimeout(show);
-      } else {
-        show();
-      }
+      show();
     }
 
     return this._showingDeferred.promise();
@@ -664,7 +656,6 @@ class Overlay<
         this._forceFocusLost();
         this._toggleShading(false);
         this._toggleSubscriptions(false);
-        this._stopShowTimer();
         this._animateHiding();
       };
 
@@ -1229,18 +1220,9 @@ class Overlay<
     }
 
     this._renderVisibility(false);
-    this._stopShowTimer();
     this._cleanFocusState();
   }
 
-  _stopShowTimer(): void {
-    if (this._asyncShowTimeout) {
-      clearTimeout(this._asyncShowTimeout);
-    }
-
-    this._asyncShowTimeout = null;
-  }
-
   _dispose(): void {
     // @ts-expect-error
     fx.stop(this._$content, false);

packages/devextreme/testing/tests/DevExpress.ui.widgets/drawer.scenarios.tests.js

@@ -492,7 +492,9 @@ configs.forEach(config => {
                     templates: {
                         template1: {
                             render(data) {
-                                drawer.getOverlay()._viewPortChangeHandler();
+                                Promise.resolve().then(() => {
+                                    drawer.getOverlay()._viewPortChangeHandler();
+                                });
                                 $(data.container).append($(drawerTesters[config.position].template()));
                                 data.onRendered();
                             }

packages/devextreme/testing/tests/DevExpress.ui.widgets/loadPanel.tests.js

@@ -270,26 +270,6 @@ QUnit.module('init', {
         assert.equal($content.find(MESSAGE_SELECTOR).text(), 'Test Loading Message');
     });
 
-    QUnit.test('load panel created with templatesRenderAsynchronously option should be shown with delay', function(assert) {
-        const clock = sinon.useFakeTimers();
-        try {
-            const onShowingSpy = sinon.spy();
-
-            const instance = $('#loadPanel').dxLoadPanel({
-                templatesRenderAsynchronously: true,
-                visible: true,
-                onShowing: onShowingSpy
-            }).dxLoadPanel('instance');
-
-            assert.strictEqual(instance.option('templatesRenderAsynchronously'), true, 'templatesRenderAsynchronously option can be reassigned (T896267)');
-            assert.strictEqual(onShowingSpy.called, false);
-            clock.tick(10);
-            assert.strictEqual(onShowingSpy.called, true);
-        } finally {
-            clock.restore();
-        }
-    });
-
     QUnit.test('shows on init if loading option is true', function(assert) {
         $('#loadPanel').dxLoadPanel({ message: 'Test Loading Message', visible: true });
         assert.ok($('#loadPanel').is(':visible'));

packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js

@@ -204,25 +204,6 @@ testModule('render', moduleConfig, () => {
             }).remove();
     });
 
-    test('overlay created with templatesRenderAsynchronously option should be shown with delay', function(assert) {
-        const clock = sinon.useFakeTimers();
-        try {
-            const onShowingSpy = sinon.spy();
-
-            $('#overlay').dxOverlay({
-                templatesRenderAsynchronously: true,
-                visible: true,
-                onShowing: onShowingSpy
-            });
-
-            assert.strictEqual(onShowingSpy.called, false);
-            clock.tick(10);
-            assert.strictEqual(onShowingSpy.called, true);
-        } finally {
-            clock.restore();
-        }
-    });
-
     test('overlay should be positioned correctly after async template is rendered (T1114344)', function(assert) {
         // NOTE: React 18 renders templates asynchronously. It cannot be changed in our react wrappers.