Chat: data load indication (#28176)

e2e/testcafe-devextreme/tests/chat/messageBubble.ts

@@ -35,6 +35,6 @@ test('Chat: messagebubble', async (t) => {
 
   return createWidget('dxChat', {
     width: 400,
-    height: 600,
+    height: 650,
   }, '#chat');
 });

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss

@@ -22,6 +22,21 @@
       }
     }
   }
+
+  .dx-scrollview-bottom-pocket {
+    width: 100%;
+  }
+
+  .dx-scrollview-scrollbottom-text {
+    margin: 0;
+  }
+}
+
+.dx-chat-messagelist-empty {
+  .dx-scrollable-content {
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 .dx-chat-messagelist-empty-view {

packages/devextreme-themebuilder/tests/data/dependencies.ts

@@ -16,7 +16,7 @@ export const dependencies: FlatStylesDependencies = {
   buttongroup: ['validation', 'button'],
   dropdownbutton: ['validation', 'button', 'buttongroup', 'popup', 'loadindicator', 'loadpanel', 'scrollview', 'list'],
   calendar: ['validation', 'button'],
-  chat: ['button', 'loadindicator', 'textbox', 'validation'],
+  chat: ['button', 'loadindicator', 'loadpanel', 'scrollview', 'textbox', 'validation'],
   checkbox: ['validation'],
   numberbox: ['validation', 'button', 'loadindicator'],
   colorbox: ['validation', 'button', 'loadindicator', 'numberbox', 'textbox', 'popup'],

packages/devextreme/js/__internal/ui/chat/chat.ts

@@ -67,6 +67,10 @@ class Chat extends Widget<Properties> {
     this.option('items', newItems.slice());
   }
 
+  _dataSourceLoadingChangedHandler(isLoading: boolean): void {
+    this._messageList?.option('isLoading', isLoading);
+  }
+
   _dataSourceOptions(): DataSourceOptions {
     return { paginate: false };
   }
@@ -110,6 +114,8 @@ class Chat extends Widget<Properties> {
       items,
       currentUserId,
       showDayHeaders,
+      // @ts-expect-error
+      isLoading: this._dataController.isLoading(),
     });
   }
 

packages/devextreme/js/__internal/ui/chat/messagelist.ts

@@ -2,14 +2,15 @@ import Guid from '@js/core/guid';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import resizeObserverSingleton from '@js/core/resize_observer';
+import { noop } from '@js/core/utils/common';
 import dateUtils from '@js/core/utils/date';
 import dateSerialization from '@js/core/utils/date_serialization';
 import { isElementInDom } from '@js/core/utils/dom';
 import { isDate, isDefined } from '@js/core/utils/type';
 import messageLocalization from '@js/localization/message';
 import { getScrollTopMax } from '@js/renovation/ui/scroll_view/utils/get_scroll_top_max';
 import type { Message } from '@js/ui/chat';
-import Scrollable from '@js/ui/scroll_view/ui.scrollable';
+import ScrollView from '@js/ui/scroll_view';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
@@ -19,6 +20,7 @@ import type { MessageGroupAlignment } from './messagegroup';
 import MessageGroup from './messagegroup';
 
 const CHAT_MESSAGELIST_CLASS = 'dx-chat-messagelist';
+const CHAT_MESSAGELIST_EMPTY_CLASS = 'dx-chat-messagelist-empty';
 
 const CHAT_MESSAGELIST_EMPTY_VIEW_CLASS = 'dx-chat-messagelist-empty-view';
 const CHAT_MESSAGELIST_EMPTY_IMAGE_CLASS = 'dx-chat-messagelist-empty-image';
@@ -33,6 +35,7 @@ export interface Properties extends WidgetOptions<MessageList> {
   items: Message[];
   currentUserId: number | string | undefined;
   showDayHeaders: boolean;
+  isLoading?: boolean;
 }
 
 class MessageList extends Widget<Properties> {
@@ -42,14 +45,15 @@ class MessageList extends Widget<Properties> {
 
   private _containerClientHeight!: number;
 
-  private _scrollable!: Scrollable<unknown>;
+  private _scrollView!: ScrollView;
 
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
       items: [],
       currentUserId: '',
       showDayHeaders: true,
+      isLoading: false,
     };
   }
 
@@ -65,7 +69,7 @@ class MessageList extends Widget<Properties> {
 
     super._initMarkup();
 
-    this._renderScrollable();
+    this._renderScrollView();
     this._renderMessageListContent();
     this._updateAria();
   }
@@ -97,12 +101,12 @@ class MessageList extends Widget<Properties> {
       const heightChange = this._containerClientHeight - newHeight;
       const isHeightDecreasing = heightChange > 0;
 
-      let scrollTop = this._scrollable.scrollTop();
+      let scrollTop = this._scrollView.scrollTop();
 
       if (isHeightDecreasing) {
         scrollTop += heightChange;
 
-        this._scrollable.scrollTo({ top: scrollTop });
+        this._scrollView.scrollTo({ top: scrollTop });
       }
     }
 
@@ -136,6 +140,7 @@ class MessageList extends Widget<Properties> {
   }
 
   _removeEmptyView(): void {
+    this.$element().removeClass(CHAT_MESSAGELIST_EMPTY_CLASS);
     this._$content().empty();
   }
 
@@ -166,13 +171,16 @@ class MessageList extends Widget<Properties> {
     this._messageGroups?.push(messageGroup);
   }
 
-  _renderScrollable(): void {
+  _renderScrollView(): void {
     const $scrollable = $('<div>')
       .appendTo(this.$element());
 
-    this._scrollable = this._createComponent($scrollable, Scrollable, {
+    this._scrollView = this._createComponent($scrollable, ScrollView, {
       useKeyboard: false,
       bounceEnabled: false,
+      onReachBottom: noop,
+      reachBottomText: '',
+      indicateLoading: false,
     });
   }
 
@@ -218,9 +226,23 @@ class MessageList extends Widget<Properties> {
       .appendTo(this._$content());
   }
 
+  _updateLoadingState(isLoading: boolean): void {
+    if (!this._scrollView) {
+      return;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this._scrollView.release(!isLoading);
+  }
+
   _renderMessageListContent(): void {
-    if (this._isEmpty()) {
+    const { isLoading } = this.option();
+
+    this.$element().toggleClass(CHAT_MESSAGELIST_EMPTY_CLASS, this._isEmpty() && !isLoading);
+
+    if (this._isEmpty() && !isLoading) {
       this._renderEmptyViewContent();
+      this._updateLoadingState(false);
 
       return;
     }
@@ -261,6 +283,10 @@ class MessageList extends Widget<Properties> {
         this._createMessageGroupComponent(currentMessageGroupItems, currentMessageGroupUserId);
       }
     });
+
+    // @ts-expect-error
+    this._updateLoadingState(isLoading);
+    this._scrollContentToLastMessage();
   }
 
   _renderMessage(message: Message): void {
@@ -293,17 +319,17 @@ class MessageList extends Widget<Properties> {
   }
 
   _$content(): dxElementWrapper {
-    return $(this._scrollable.content());
+    return $(this._scrollView.content());
   }
 
   _scrollContentToLastMessage(): void {
-    this._scrollable.scrollTo({
+    this._scrollView.scrollTo({
       top: getScrollTopMax(this._scrollableContainer()),
     });
   }
 
   _scrollableContainer(): Element {
-    return $(this._scrollable.element()).find(`.${SCROLLABLE_CONTAINER_CLASS}`).get(0);
+    return $(this._scrollView.element()).find(`.${SCROLLABLE_CONTAINER_CLASS}`).get(0);
   }
 
   _isMessageAddedToEnd(value: Message[], previousValue: Message[]): boolean {
@@ -391,6 +417,8 @@ class MessageList extends Widget<Properties> {
       case 'showDayHeaders':
         this._invalidate();
         break;
+      case 'isLoading':
+        break;
       default:
         super._optionChanged(args);
     }