DataGrid - Cannot read properties of undefined (reading 'done') error occurs when column fixing and state storing are used (T1283168) (DevExpress#29356)

Author: tongsonbarbs

e2e/testcafe-devextreme/tests/dataGrid/common/stateStoring/stateStoring.ts

@@ -16,6 +16,29 @@ const makeLocalStorageJsonInvalid = ClientFunction(() => {
   window.localStorage.testStorageKey = '{]';
 });
 
+const dataGridConfig = {
+  dataSource: [
+    { id: 0, text: 'item 1' },
+    { id: 1, text: 'item 2' },
+    { id: 2, text: 'item 3' },
+    { id: 3, text: 'item 4' },
+  ],
+  columnFixing: {
+    enabled: true,
+  },
+  keyExpr: 'id',
+  stateStoring: {
+    enabled: true,
+  },
+  scrolling: {
+    mode: 'virtual' as any,
+  },
+  customizeColumns(columns) {
+    columns[0].fixed = true;
+    columns[0].fixedPosition = 'sticky';
+  },
+};
+
 test('The Grid should load if JSON in localStorage is invalid and stateStoring enabled', async (t) => {
   const dataGrid = new DataGrid(GRID_CONTAINER);
   const secondCell = dataGrid.getDataCell(1, 1);
@@ -110,3 +133,12 @@ test('The focused state of a row with the 0 key should be restored (T1252962)',
     },
   },
 }));
+
+test('DataGrid - Cannot read properties of undefined (reading \'done\') error occurs when column fixing and state storing are used (T1283168)', async (t) => {
+  await t.eval(() => location.reload());
+  await createWidget('dxDataGrid', { ...dataGridConfig });
+  // eslint-disable-next-line max-len
+  // DataGrid is expected to load normally with the given configuration, so no other checks are required.
+}).before(async () => {
+  await createWidget('dxDataGrid', { ...dataGridConfig });
+});

packages/devextreme/js/__internal/grids/grid_core/column_headers/m_column_headers.ts

@@ -3,6 +3,7 @@ import messageLocalization from '@js/common/core/localization/message';
 import domAdapter from '@js/core/dom_adapter';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import { Deferred } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
 import { each } from '@js/core/utils/iterator';
 import { getHeight } from '@js/core/utils/size';
@@ -294,7 +295,8 @@ export class ColumnHeadersView extends ColumnsView {
     const change = {};
 
     if (that._tableElement && !that._dataController.isLoaded() && !that._hasRowElements) {
-      return;
+      // @ts-expect-error
+      return new Deferred().resolve();
     }
 
     $container