chore: Improve channel view performance by virtualizing the messages lists

apps/meteor/app/lib/client/methods/sendMessage.ts

@@ -1,5 +1,4 @@
 import type { IMessage } from '@rocket.chat/core-typings';
-import { clientCallbacks } from '@rocket.chat/ui-client';
 
 import { onClientMessageReceived } from '../../../../client/lib/onClientMessageReceived';
 import { settings } from '../../../../client/lib/settings';
@@ -50,6 +49,4 @@ export const runOptimisticSendMessage = async (
 	if (processed.tmid) {
 		upsertThreadMessageInCache(processed, processed.rid, processed.tmid);
 	}
-
-	await clientCallbacks.run('afterSaveMessage', processed, { room, user });
 };

apps/meteor/app/theme/client/imports/general/base_old.css

@@ -56,7 +56,7 @@
 		padding-bottom: 24px;
 	}
 
-	& ul.messages-list {
+	& .messages-list {
 		padding: 21px 0 10px;
 	}
 }

apps/meteor/app/ui-utils/client/lib/RoomHistoryManager.ts

@@ -2,7 +2,6 @@ import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings';
 import { Emitter } from '@rocket.chat/emitter';
 import { differenceInMilliseconds } from 'date-fns';
 import { useCallback, useSyncExternalStore } from 'react';
-import type { MutableRefObject } from 'react';
 
 import { onClientMessageReceived } from '../../../../client/lib/onClientMessageReceived';
 import { getUserId } from '../../../../client/lib/user';
@@ -225,14 +224,13 @@ class RoomHistoryManagerClass extends Emitter {
 		room.scroll = undefined;
 	}
 
-	public async getMoreNext(rid: IRoom['_id'], atBottomRef: MutableRefObject<boolean>) {
+	public async getMoreNext(rid: IRoom['_id']) {
 		const room = this.getRoom(rid);
 		if (room.hasMoreNext !== true) {
 			return;
 		}
 
 		await this.queue();
-		atBottomRef.current = false;
 
 		this.updateRoom(rid, { isLoading: true });
 
@@ -323,13 +321,15 @@ class RoomHistoryManagerClass extends Emitter {
 		}
 
 		const room = this.getRoom(message.rid);
+		this.updateRoom(message.rid, { isLoading: true });
 
 		const subscription = Subscriptions.state.find((record) => record.rid === message.rid);
 		const result = await callWithErrorHandling('loadSurroundingMessages', message, defaultLimit, showThreadMessages);
 
 		this.clear(message.rid);
 
 		if (!result) {
+			this.updateRoom(message.rid, { isLoading: false });
 			return;
 		}
 		const { messages = [] } = result;

apps/meteor/client/components/message/list/MessageListContext.tsx

@@ -1,5 +1,5 @@
 import type { IMessage } from '@rocket.chat/core-typings';
-import type { KeyboardEvent, MouseEvent, RefCallback } from 'react';
+import type { KeyboardEvent, MouseEvent } from 'react';
 import { createContext, useContext } from 'react';
 
 import type { useFormatDate } from '../../../hooks/useFormatDate';
@@ -42,7 +42,6 @@ export type MessageListContextValue = {
 	formatDateAndTime: ReturnType<typeof useFormatDateAndTime>;
 	formatTime: ReturnType<typeof useFormatTime>;
 	formatDate: ReturnType<typeof useFormatDate>;
-	messageListRef?: RefCallback<HTMLElement | undefined>;
 };
 
 export const messageListContextDefaultValue: MessageListContextValue = {
@@ -73,7 +72,6 @@ export const messageListContextDefaultValue: MessageListContextValue = {
 	formatDateAndTime: () => '',
 	formatTime: () => '',
 	formatDate: () => '',
-	messageListRef: undefined,
 };
 
 export const MessageListContext = createContext<MessageListContextValue>(messageListContextDefaultValue);
@@ -98,8 +96,6 @@ export const useUserHasReacted: MessageListContextValue['useUserHasReacted'] = (
 export const useOpenEmojiPicker: MessageListContextValue['useOpenEmojiPicker'] = (...args) =>
 	useContext(MessageListContext).useOpenEmojiPicker(...args);
 
-export const useMessageListRef = (): MessageListContextValue['messageListRef'] => useContext(MessageListContext).messageListRef;
-
 export const useMessageListShowColors = (): MessageListContextValue['showColors'] => useContext(MessageListContext).showColors;
 
 export const useMessageListKatex = (): MessageListContextValue['katex'] => useContext(MessageListContext).katex;

apps/meteor/client/components/message/variants/RoomMessage.tsx

@@ -15,7 +15,6 @@ import {
 	useIsSelectedMessage,
 	useCountSelected,
 } from '../../../views/room/MessageList/contexts/SelectedMessagesContext';
-import { useJumpToMessage } from '../../../views/room/MessageList/hooks/useJumpToMessage';
 import Emoji from '../../Emoji';
 import IgnoredContent from '../IgnoredContent';
 import MessageHeader from '../MessageHeader';
@@ -88,7 +87,6 @@ const RoomMessage = ({
 	const { enabled: readReceiptEnabled } = useMessageListReadReceipts();
 
 	useCountSelected();
-	const messageRef = useJumpToMessage(message._id);
 
 	const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
 		if (!selecting) return;
@@ -103,7 +101,6 @@ const RoomMessage = ({
 
 	return (
 		<Message
-			ref={messageRef}
 			id={message._id}
 			role='listitem'
 			tabIndex={0}

apps/meteor/client/components/message/variants/ThreadMessage.tsx

@@ -8,7 +8,6 @@ import { memo } from 'react';
 
 import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/MessageAction';
 import { useIsMessageHighlight } from '../../../views/room/MessageList/contexts/MessageHighlightContext';
-import { useJumpToMessage } from '../../../views/room/MessageList/hooks/useJumpToMessage';
 import Emoji from '../../Emoji';
 import IgnoredContent from '../IgnoredContent';
 import MessageHeader from '../MessageHeader';
@@ -33,15 +32,12 @@ const ThreadMessage = ({ message, sequential, unread, showUserAvatar }: ThreadMe
 	// Checks if is videoconf message to limit toolbox actions
 	const messageContext: MessageActionContext = isVideoConfMessage(message) ? 'videoconf-threads' : 'threads';
 
-	const messageRef = useJumpToMessage(message._id);
-
 	return (
 		<Message
 			role='listitem'
 			aria-roledescription={t('thread_message')}
 			tabIndex={0}
 			id={message._id}
-			ref={messageRef}
 			isEditing={editing}
 			isPending={message.temp}
 			sequential={sequential}

apps/meteor/client/lib/chats/flows/afterSendMessageCallback.ts

@@ -0,0 +1,24 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { clientCallbacks } from '@rocket.chat/ui-client';
+
+import { Rooms } from '../../../stores';
+import { getUser } from '../../user';
+
+export const afterSendMessageCallback = async (message: IMessage, rid: string) => {
+	const user = getUser();
+	const room = Rooms.state.get(rid);
+
+	if (!room || !user) {
+		return;
+	}
+
+	const processedMessage = {
+		...message,
+		u: {
+			_id: user?._id,
+			username: user?.username,
+			name: user?.name || '',
+		},
+	};
+	await clientCallbacks.run('afterSaveMessage', processedMessage, { room, user });
+};

apps/meteor/client/lib/chats/flows/sendMessage.ts

@@ -8,6 +8,7 @@ import { Messages } from '../../../stores';
 import { onClientBeforeSendMessage } from '../../onClientBeforeSendMessage';
 import { dispatchToastMessage } from '../../toast';
 import type { ChatAPI } from '../ChatAPI';
+import { afterSendMessageCallback } from './afterSendMessageCallback';
 import { processMessageEditing } from './processMessageEditing';
 import { processMessageUploads } from './processMessageUploads';
 import { processSetReaction } from './processSetReaction';
@@ -108,6 +109,7 @@ export const sendMessage = async (
 		try {
 			await process(chat, message, previewUrls, isSlashCommandAllowed);
 			chat.composer?.dismissAllQuotedMessages();
+			await afterSendMessageCallback(message, message.rid);
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });
 		}

apps/meteor/client/lib/chats/readStateManager.ts

@@ -24,12 +24,6 @@ export class ReadStateManager extends Emitter {
 		return this.rid;
 	}
 
-	// TODO: Use ref to get unreadMark
-	// private unreadMark?: HTMLElement;
-	private get unreadMark() {
-		return document.querySelector<HTMLElement>('.rcx-message-divider--unread');
-	}
-
 	public onUnreadStateChange = (callback: () => void): (() => void) => {
 		return this.on('unread-state-change', callback);
 	};
@@ -115,12 +109,10 @@ export class ReadStateManager extends Emitter {
 		};
 	};
 
-	private isUnreadMarkVisible(): boolean {
-		if (!this.unreadMark) {
-			return false;
-		}
+	private isUnreadMarkVisible: () => boolean = () => false;
 
-		return this.unreadMark.offsetTop > (this.unreadMark.offsetParent?.scrollTop || 0);
+	public setIsUnreadMarkVisibleCallback(callback: () => boolean) {
+		this.isUnreadMarkVisible = callback;
 	}
 
 	// This will only mark as read if the unread mark is visible
@@ -134,7 +126,7 @@ export class ReadStateManager extends Emitter {
 			return;
 		}
 
-		if (this.unreadMark && !this.isUnreadMarkVisible()) {
+		if (this.firstUnreadRecordId && this.isUnreadMarkVisible() === false) {
 			return;
 		}
 		// if there are unloaded unread messages, don't mark as read