Form: loadPanel indicator shouldn't be cropped in Material and Generic themes (#30984)

Author: EugeniyKiyashko

packages/devextreme/js/__internal/ui/form/form.load_panel.ts

@@ -8,7 +8,7 @@ import LoadIndicator, { AnimationType } from '@ts/ui/load_indicator';
 import type { LoadPanelProperties } from '@ts/ui/load_panel';
 import type LoadPanel from '@ts/ui/load_panel';
 
-const FORM_LOAD_INDICATOR_SIZE = 120;
+export const FORM_LOAD_INDICATOR_SIZE = 120;
 
 interface FormLoadPanelDependencies {
   $container: dxElementWrapper;
@@ -63,6 +63,10 @@ export class FormLoadPanel {
       .appendTo(this._dependencies.$container);
 
     this._loadPanel = this._dependencies.onLoadPanelCreate($loadPanel, {
+      width: FORM_LOAD_INDICATOR_SIZE,
+      height: FORM_LOAD_INDICATOR_SIZE,
+      maxHeight: undefined,
+      maxWidth: undefined,
       position: {
         of: this._dependencies.$container.get(0),
       },

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

@@ -43,6 +43,8 @@ import {
     FORM_LOAD_PANEL_WRAPPER_CLASS
 } from '__internal/ui/form/constants';
 
+import { FORM_LOAD_INDICATOR_SIZE } from '__internal/ui/form/form.load_panel';
+
 import {
     GET_LABEL_WIDTH_BY_TEXT_CLASS,
     FIELD_ITEM_OPTIONAL_MARK_CLASS,
@@ -5349,16 +5351,27 @@ QUnit.module('LoadIndicator', () => {
         const $loadPanel = form.$element().find(`.${FORM_LOAD_PANEL_CLASS}`);
         const loadPanelInstance = $loadPanel.data('dxLoadPanel');
 
-        assert.strictEqual(loadPanelInstance.option('visible'), true, 'LoadPanel is visible');
-        assert.strictEqual(loadPanelInstance.option('showIndicator'), true, 'LoadPanel shows indicator');
-        assert.strictEqual(loadPanelInstance.option('showPane'), false, 'LoadPanel does not show pane');
-        assert.strictEqual(loadPanelInstance.option('shading'), false, 'LoadPanel does not show shading');
-        assert.strictEqual(loadPanelInstance.option('hideOnOutsideClick'), false, 'LoadPanel does not hide on outside click');
-        assert.strictEqual(loadPanelInstance.option('hideOnParentScroll'), false, 'LoadPanel does not hide on parent scroll');
-        assert.strictEqual(loadPanelInstance.option('deferRendering'), false, 'LoadPanel does not defer rendering');
-        assert.strictEqual(loadPanelInstance.option('disabled'), false, 'LoadPanel is not disabled');
-        assert.strictEqual(loadPanelInstance.option('message'), '', 'LoadPanel has empty message');
-        assert.strictEqual(loadPanelInstance.option('wrapperAttr.class'), FORM_LOAD_PANEL_WRAPPER_CLASS, 'LoadPanel has correct wrapper class');
+
+        const expectedOptions = {
+            visible: true,
+            showIndicator: true,
+            showPane: false,
+            shading: false,
+            hideOnOutsideClick: false,
+            hideOnParentScroll: false,
+            deferRendering: false,
+            disabled: false,
+            message: '',
+            'wrapperAttr.class': FORM_LOAD_PANEL_WRAPPER_CLASS,
+            width: FORM_LOAD_INDICATOR_SIZE,
+            height: FORM_LOAD_INDICATOR_SIZE,
+            maxWidth: undefined,
+            maxHeight: undefined
+        };
+
+        Object.entries(expectedOptions).forEach(([optionName, value]) => {
+            assert.strictEqual(loadPanelInstance.option(optionName), value, `${optionName} option has correct default value`);
+        });
     });
 
     QUnit.test('LoadPanel has correct positioning relative to form', function(assert) {
@@ -5448,9 +5461,12 @@ QUnit.module('LoadIndicator', () => {
         assert.strictEqual(form.option('disabled'), true, 'Form is disabled during operation');
 
         clock.tick(150);
+
         assert.strictEqual(form.$element().find(`.${FORM_LOAD_PANEL_CLASS}`).length, 1, 'LoadPanel is still present but hidden');
+
         const $loadPanel = form.$element().find(`.${FORM_LOAD_PANEL_CLASS}`);
         const loadPanelInstance = $loadPanel.data('dxLoadPanel');
+
         assert.strictEqual(loadPanelInstance.option('visible'), false, 'LoadPanel is hidden after operation');
         assert.strictEqual(form.option('disabled'), false, 'Form is enabled after operation');