Chat: add missing parts that are untested in dark theme and compact size mode (#28331)

Author: EugeniyKiyashko

e2e/testcafe-devextreme/tests/chat/etalons/Messagelist loadindicator position on initial loading (fluent-blue-light).png

@@ -1,12 +1,13 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import Chat from 'devextreme-testcafe-models/chat';
 import { ClientFunction } from 'testcafe';
-import { User } from 'devextreme/ui/chat';
+import { Message, User } from 'devextreme/ui/chat';
 import TabPanel from 'devextreme-testcafe-models/tabPanel';
 import { createUser, generateMessages, getLongText } from './data';
 import url from '../../helpers/getPageUrl';
 import { createWidget } from '../../helpers/createWidget';
 import { testScreenshot } from '../../helpers/themeUtils';
+import { insertStylesheetRulesToPage } from '../../helpers/domUtils';
 
 fixture.disablePageReloads`ChatMessageList`
   .page(url(__dirname, '../container.html'));
@@ -152,6 +153,37 @@ test('Messagelist should scrolled to the latest messages after being rendered in
   });
 });
 
+test('Messagelist with loadindicator appearance on initial loading', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const chat = new Chat('#container');
+
+  await chat.repaint();
+  await testScreenshot(t, takeScreenshot, 'Messagelist loadindicator position on initial loading.png', { element: '#container' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await insertStylesheetRulesToPage('.dx-loadindicator-content, .dx-loadindicator-icon, .dx-loadindicator-segment, .dx-loadindicator-segment-inner { animation-play-state: paused !important; }');
+
+  await createWidget('dxChat', () => {
+    const data: Message[] = [];
+
+    return {
+      dataSource: new (window as any).DevExpress.data.CustomStore({
+        key: 'id',
+        load: () => new Promise<Message[]>((resolve) => {
+          setTimeout(() => {
+            resolve(data);
+          }, 3000);
+        }),
+      }),
+      width: 400,
+      height: 600,
+    };
+  });
+});
+
 test('Messagelist with messageTemplate', async (t) => {
   const chat = new Chat('#container');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);