Fix load panel stucking when loading cached page

Author: Alyar

packages/devextreme/js/__internal/grids/grid_core/ai_column/ai_column.integration.test.ts

@@ -4556,4 +4556,69 @@ describe('Load panel', () => {
       expect(component.getLoadPanel().isVisible()).toBe(false);
     });
   });
+
+  describe('when AI Column response is cached', () => {
+    it('should be hidden', async () => {
+      const aiIntegration = new AIIntegration({
+        sendRequest(prompt): RequestResult {
+          return {
+            promise: new Promise<string>((resolve) => {
+              const result = {};
+              Object.entries(prompt.data?.data).forEach(([key, value]) => {
+                result[key] = `Response ${(value as any).name}`;
+              });
+
+              resolve(JSON.stringify(result));
+            }),
+            abort: (): void => {},
+          };
+        },
+      });
+      const { component, instance } = await createDataGrid({
+        dataSource: [
+          { id: 1, name: 'Name 1', value: 10 },
+          { id: 2, name: 'Name 2', value: 20 },
+        ],
+        paging: {
+          pageSize: 1,
+        },
+        keyExpr: 'id',
+        columns: [
+          { dataField: 'id', caption: 'ID' },
+          { dataField: 'name', caption: 'Name' },
+          { dataField: 'value', caption: 'Value' },
+          {
+            type: 'ai',
+            caption: 'AI Column',
+            name: 'myColumn',
+            ai: {
+              aiIntegration,
+              prompt: 'Test prompt',
+            },
+          },
+        ],
+      });
+
+      expect(instance.getAIColumnText('myColumn', 1)).toEqual('Response Name 1');
+
+      instance.option('paging.pageIndex', 1);
+      jest.runAllTimers();
+
+      expect(component.getLoadPanel().isVisible()).toBe(true);
+
+      await Promise.resolve();
+
+      expect(instance.getAIColumnText('myColumn', 2)).toEqual('Response Name 2');
+
+      instance.option('paging.pageIndex', 0);
+      jest.runAllTimers();
+
+      expect(component.getLoadPanel().isVisible()).toBe(false);
+
+      await Promise.resolve();
+
+      expect(instance.getAIColumnText('myColumn', 1)).toEqual('Response Name 1');
+      expect(component.getLoadPanel().isVisible()).toBe(false);
+    });
+  });
 });

packages/devextreme/js/__internal/grids/grid_core/ai_column/m_ai_column_controller.ts

@@ -1,10 +1,10 @@
-import type { GenerateGridColumnCommandResult, RequestCallbacks } from '@js/common/ai-integration';
 import type { Callback } from '@js/core/utils/callbacks';
 
 import type { Column, ColumnsController } from '../columns_controller/m_columns_controller';
 import type { DataController, HandleDataChangedArguments, UserData } from '../data_controller/m_data_controller';
 import { Controller } from '../m_modules';
 import { AIColumnIntegrationController } from './m_ai_column_integration_controller';
+import type { InternalRequestCallbacks } from './types';
 import { getAICommandColumnDefaultOptions, isAIColumnAutoMode, isPromptOption } from './utils';
 
 export class AIColumnController extends Controller {
@@ -124,13 +124,13 @@ export class AIColumnController extends Controller {
     needToShowLoadPanel = true,
   ): void {
     const callbacks = this.getRequestCallbacks();
-    const column = this.columnsController.columnOption(columnName);
 
-    if (needToShowLoadPanel && !!column?.ai?.prompt) {
-      this.dataController.beginCustomLoading();
-    }
-
-    this.aiColumnIntegrationController.sendRequest(columnName, useCache, callbacks);
+    this.aiColumnIntegrationController.sendRequestCore({
+      columnName,
+      useCache,
+      needToShowLoadPanel,
+      callbacks,
+    });
   }
 
   public sendAIColumnRequest(
@@ -145,8 +145,13 @@ export class AIColumnController extends Controller {
     this.sendRequest(columnName, false);
   }
 
-  private getRequestCallbacks(): RequestCallbacks<GenerateGridColumnCommandResult> {
+  private getRequestCallbacks(): InternalRequestCallbacks {
     return {
+      onRequestSending: (needToShowLoadPanel: boolean): void => {
+        if (needToShowLoadPanel) {
+          this.dataController.beginCustomLoading();
+        }
+      },
       onComplete: (data): void => {
         this.dataController.endCustomLoading();
         this.aiRequestCompleted.fire(data);

packages/devextreme/js/__internal/grids/grid_core/ai_column/m_ai_column_integration_controller.ts

@@ -10,6 +10,7 @@ import type { DataController } from '../data_controller/m_data_controller';
 import type { ErrorHandlingController } from '../error_handling/m_error_handling';
 import { Controller } from '../m_modules';
 import { AIColumnCacheController } from './m_ai_column_cache_controller';
+import type { InternalRequestCallbacks } from './types';
 import { getDataFromRowItems, reduceDataCachedKeys } from './utils';
 
 export class AIColumnIntegrationController extends Controller {
@@ -35,11 +36,17 @@ export class AIColumnIntegrationController extends Controller {
     this.createAction('onAIColumnResponseReceived');
   }
 
-  public sendRequest(
-    columnName: string,
-    useCache: boolean,
-    callbacks?: RequestCallbacks<GenerateGridColumnCommandResult>,
-  ): void {
+  public sendRequestCore({
+    columnName,
+    useCache,
+    needToShowLoadPanel,
+    callbacks,
+  }: {
+    columnName: string;
+    useCache: boolean;
+    needToShowLoadPanel: boolean;
+    callbacks: InternalRequestCallbacks;
+  }): void {
     const aiIntegration = this.getAIIntegration(columnName);
     if (!aiIntegration) {
       return;
@@ -86,6 +93,8 @@ export class AIColumnIntegrationController extends Controller {
       return;
     }
 
+    callbacks.onRequestSending(needToShowLoadPanel);
+
     const abort = aiIntegration.generateGridColumn(
       {
         text: prompt,

packages/devextreme/js/__internal/grids/grid_core/ai_column/types.ts

@@ -0,0 +1,8 @@
+import type {
+  GenerateGridColumnCommandResult,
+  RequestCallbacks,
+} from '@js/common/ai-integration';
+
+export type InternalRequestCallbacks = RequestCallbacks<GenerateGridColumnCommandResult> & {
+  onRequestSending: (needToShowLoadPanel: boolean) => void;
+};