Chart: reduce flicking when async templates are used for label and series visibility is changed at runtime (T1232664, partial fix) (DevExpress#28878) (DevExpress#28940)

Author: ksercs

packages/devextreme/js/__internal/viz/core/m_base_widget.ts

@@ -271,6 +271,11 @@ const baseWidget = isServerSide ? getEmptyComponent() : (DOMComponent as any).in
 
     let syncRendering = true;
     when.apply(this, items).done(() => {
+      const isGroupInDom = !groups[0]?.element || !!$(groups[0].element.closest('svg')).length;
+      if (!isGroupInDom) {
+        return;
+      }
+
       if (syncRendering) {
         this._setGroupsVisibility(groups, 'visible');
         return;

packages/devextreme/js/viz/axes/tick.js

@@ -1,6 +1,6 @@
 import { isDefined } from '../../core/utils/type';
 import { extend } from '../../core/utils/extend';
-import { Deferred } from '../../core/utils/deferred';
+import { Deferred, when } from '../../core/utils/deferred';
 
 function getPathStyle(options) {
     return { stroke: options.color, 'stroke-width': options.width, 'stroke-opacity': options.opacity, opacity: 1 };
@@ -49,12 +49,14 @@ function createTick(axis, renderer, tickOptions, gridOptions, skippedCategory, s
                 this.labelCoords = axis._getTranslatedValue(value);
             },
             saveCoords() {
-                this._lastStoredCoordinates = {
-                    coords: this._storedCoords,
-                    labelCoords: this._storedLabelsCoords
-                };
-                this._storedCoords = this.coords;
-                this._storedLabelsCoords = this.templateContainer ? this._getTemplateCoords() : this.labelCoords;
+                when(this._templateDef).done(() => {
+                    this._lastStoredCoordinates = {
+                        coords: this._storedCoords,
+                        labelCoords: this._storedLabelsCoords
+                    };
+                    this._storedCoords = this.coords;
+                    this._storedLabelsCoords = this.templateContainer ? this._getTemplateCoords() : this.labelCoords;
+                });
             },
             resetCoordinates() {
                 if(this._lastStoredCoordinates) {

packages/devextreme/testing/tests/DevExpress.viz.charts/chart.integration.tests.js

@@ -4866,3 +4866,101 @@ QUnit.test('Set bar width (via interval) for each pane (T1000672)', function(ass
     assert.ok(chart.series[0].getPoints()[0].width > 30);
     assert.ok(chart.series[2].getPoints()[0].width < 10);
 });
+
+QUnit.module('React async templates rendering', {
+    beforeEach: function() {
+        this.clock = sinon.useFakeTimers();
+        this.templateTimeout = 1000;
+        this.integrationOptions = {
+            templates: {
+                labelTemplate: {
+                    render: ({ model, container, onRendered }) => {
+                        const deferred = $.Deferred();
+                        setTimeout(() => {
+                            const content = $(`<svg overflow="visible"><text fill="#767676" x="30" y="59" text-anchor="middle">${model.valueText}</text></svg>`);
+                            container.append(content);
+                            onRendered();
+                            deferred.resolve();
+                        }, this.templateTimeout);
+                        return deferred.promise();
+                    }
+                },
+            }
+        };
+    },
+    afterEach: function() {
+        this.clock.restore();
+    }
+}, () => {
+    QUnit.test('no visual slide animation should be shown when label templates are rendered asynchroniously (T1232664)', function(assert) {
+        const chart = $('#chartContainer').dxChart({
+            dataSource: [{ arg: 1, val: 10 }],
+            templatesRenderAsynchronously: true,
+            animation: { enabled: true },
+            commonSeriesSettings: {
+                type: 'bar',
+                argumentField: 'arg',
+            },
+            series: [{
+                valueField: 'val',
+            }],
+            integrationOptions: this.integrationOptions,
+            argumentAxis: {
+                label: {
+                    template: 'labelTemplate',
+                },
+            },
+        }).dxChart('instance');
+
+        const axis = chart.getArgumentAxis();
+        const animationSpy = sinon.spy(axis._majorTicks[0].templateContainer, 'animate');
+
+        chart.render({ animate: true });
+
+        this.clock.tick(this.templateTimeout);
+
+        assert.strictEqual(animationSpy.callCount, 0, 'slide animation is not run because no label coordinates were saved before template is rendered');
+    });
+
+    QUnit.test('label templates should be visible after rendering even if additional render interrupted first render, async templates in React 17 (T1232664)', function(assert) {
+        const chart = $('#chartContainer').dxChart({
+            dataSource: [{ arg: 1, val: 10 }],
+            templatesRenderAsynchronously: true,
+            animation: { enabled: true },
+            commonSeriesSettings: {
+                type: 'bar',
+                argumentField: 'arg',
+            },
+            series: [{
+                valueField: 'val',
+            }],
+            integrationOptions: this.integrationOptions,
+            argumentAxis: {
+                label: {
+                    template: 'labelTemplate',
+                },
+            },
+        }).dxChart('instance');
+
+        this.clock.tick(this.templateTimeout);
+
+        const axis = chart.getArgumentAxis();
+        const stub = sinon
+            .stub(axis, 'getTemplatesGroups')
+            .onCall(0)
+            .returns([{ element: $(document.createElementNS('http://www.w3.org/2000/svg', 'g')), attr: () => {} }]);
+
+        chart.render({ force: true });
+        stub.callThrough();
+
+
+        chart._applyingChanges = true;
+        this.clock.tick(this.templateTimeout);
+        chart._applyingChanges = false;
+
+        chart.render({ force: true });
+        this.clock.tick(this.templateTimeout);
+
+        assert.strictEqual(axis._majorTicks[0].templateContainer.attr('visibility'), 'visible', 'label is visible');
+    });
+});