Chat: data load indication

DevExpress · Oct 16, 2024 · 002fade · 002fade
1 parent a803db5
commit 002fade
Show file tree

Hide file tree

Showing 8 changed files with 284 additions and 114 deletions.
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss
@@ -15,6 +15,11 @@
     width: 100%;
   }
 
+  &.dx-chat-messagelist-empty {
+    align-items: center;
+    justify-content: center;
+  }
+
   .dx-scrollable-native {
     &.dx-scrollable-native-ios {
       .dx-scrollable-content {

diff --git a/packages/devextreme-themebuilder/tests/data/dependencies.ts b/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'],

diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -66,6 +66,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 };
   }
@@ -108,6 +112,8 @@ class Chat extends Widget<Properties> {
     this._messageList = this._createComponent($messageList, MessageList, {
       items,
       currentUserId,
+      // @ts-expect-error
+      isLoading: this._dataController.isLoading(),
     });
   }
 

diff --git a/packages/devextreme/js/__internal/ui/chat/messagelist.ts b/packages/devextreme/js/__internal/ui/chat/messagelist.ts
@@ -2,13 +2,14 @@ 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 dateSerialization from '@js/core/utils/date_serialization';
 import { isElementInDom } from '@js/core/utils/dom';
 import { 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';
@@ -18,6 +19,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';
@@ -30,20 +32,22 @@ export const MESSAGEGROUP_TIMEOUT = 5 * 1000 * 60;
 export interface Properties extends WidgetOptions<MessageList> {
   items: Message[];
   currentUserId: number | string | undefined;
+  isLoading?: boolean;
 }
 
 class MessageList extends Widget<Properties> {
   private _messageGroups?: MessageGroup[];
 
   private _containerClientHeight!: number;
 
-  private _scrollable!: Scrollable<unknown>;
+  private _scrollView!: ScrollView;
 
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
       items: [],
       currentUserId: '',
+      isLoading: false,
     };
   }
 
@@ -58,7 +62,7 @@ class MessageList extends Widget<Properties> {
 
     super._initMarkup();
 
-    this._renderScrollable();
+    this._renderScrollView();
     this._renderMessageListContent();
     this._updateAria();
   }
@@ -90,19 +94,21 @@ 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 });
       }
     }
 
     this._containerClientHeight = newHeight;
   }
 
   _renderEmptyViewContent(): void {
+    this.$element().addClass(CHAT_MESSAGELIST_EMPTY_CLASS);
+
     const $emptyView = $('<div>')
       .addClass(CHAT_MESSAGELIST_EMPTY_VIEW_CLASS)
       .attr('id', `dx-${new Guid()}`);
@@ -129,6 +135,7 @@ class MessageList extends Widget<Properties> {
   }
 
   _removeEmptyView(): void {
+    this.$element().removeClass(CHAT_MESSAGELIST_EMPTY_CLASS);
     this._$content().empty();
   }
 
@@ -159,19 +166,34 @@ 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,
     });
   }
 
+  _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();
+
+    if (this._isEmpty() && !isLoading) {
       this._renderEmptyViewContent();
+      this._updateLoadingState(false);
 
       return;
     }
@@ -204,6 +226,10 @@ class MessageList extends Widget<Properties> {
         this._createMessageGroupComponent(currentMessageGroupItems, currentMessageGroupUserId);
       }
     });
+
+    // @ts-expect-error
+    this._updateLoadingState(isLoading);
+    this._scrollContentToLastMessage();
   }
 
   _renderMessage(message: Message): void {
@@ -232,17 +258,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 {
@@ -326,6 +352,8 @@ class MessageList extends Widget<Properties> {
       case 'items':
         this._processItemsUpdating(value ?? [], previousValue ?? []);
         break;
+      case 'isLoading':
+        break;
       default:
         super._optionChanged(args);
     }