Skip to content

Commit fabda2e

Browse files
bang9bang9
authored
fix: ensure consistent scroll to bottom delay after message send in channel module (#975)
- Now that rendering of MFM messages is consistent, unnecessary delays have been removed. - Adjusted message delay after message transmission to be consistent. - Fixed the scroll-to-bottom functionality to work properly with messages sent in threads
1 parent 21e2d4d commit fabda2e

12 files changed

+25
-44
lines changed

‎src/modules/Channel/context/hooks/useHandleChannelEvents.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,7 @@ function useHandleChannelEvents({
8383
) {
8484
// and !openContextMenu
8585
try {
86-
setTimeout(() => {
87-
scrollIntoLast(0, scrollRef);
88-
});
86+
setTimeout(() => scrollIntoLast(0, scrollRef));
8987
if (!disableMarkAsRead) {
9088
markAsReadScheduler.push(currentGroupChannel);
9189
}

‎src/modules/Channel/context/hooks/useHandleChannelPubsubEvents.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import * as channelActions from '../dux/actionTypes';
55
import { PUBSUB_TOPICS, SBUGlobalPubSub } from '../../../../lib/pubSub/topics';
66
import { shouldPubSubPublishToChannel } from '../../../internalInterfaces';
77
import { ChannelActionTypes } from '../dux/actionTypes';
8+
import { SCROLL_BOTTOM_DELAY_FOR_SEND } from '../../../../utils/consts';
89

910
export interface UseHandlePubsubEventsParams {
1011
channelUrl: string;
@@ -26,12 +27,12 @@ export const useHandleChannelPubsubEvents = ({
2627
if (pubSub?.subscribe) {
2728
subscriber.set(PUBSUB_TOPICS.SEND_USER_MESSAGE, pubSub.subscribe(PUBSUB_TOPICS.SEND_USER_MESSAGE, (props) => {
2829
const { channel, message } = props;
29-
scrollIntoLast(0, scrollRef);
3030
if (channelUrl === channel?.url) {
3131
dispatcher({
3232
type: channelActions.SEND_MESSAGE_SUCCESS,
3333
payload: message,
3434
});
35+
setTimeout(() => scrollIntoLast(0, scrollRef), SCROLL_BOTTOM_DELAY_FOR_SEND);
3536
}
3637
}));
3738
subscriber.set(PUBSUB_TOPICS.SEND_MESSAGE_START, pubSub.subscribe(PUBSUB_TOPICS.SEND_MESSAGE_START, (props) => {
@@ -63,12 +64,12 @@ export const useHandleChannelPubsubEvents = ({
6364
}));
6465
subscriber.set(PUBSUB_TOPICS.SEND_FILE_MESSAGE, pubSub.subscribe(PUBSUB_TOPICS.SEND_FILE_MESSAGE, (props) => {
6566
const { channel, message } = props;
66-
scrollIntoLast(0, scrollRef);
6767
if (channelUrl === channel?.url) {
6868
dispatcher({
6969
type: channelActions.SEND_MESSAGE_SUCCESS,
7070
payload: message,
7171
});
72+
setTimeout(() => scrollIntoLast(0, scrollRef), SCROLL_BOTTOM_DELAY_FOR_SEND);
7273
}
7374
}));
7475
subscriber.set(PUBSUB_TOPICS.UPDATE_USER_MESSAGE, pubSub.subscribe(PUBSUB_TOPICS.UPDATE_USER_MESSAGE, (props) => {

‎src/modules/Channel/context/hooks/useHandleReconnect.ts‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ import { Logger } from '../../../../lib/SendbirdState';
99
import { MarkAsReadSchedulerType } from '../../../../lib/hooks/useMarkAsReadScheduler';
1010
import useReconnectOnIdle from './useReconnectOnIdle';
1111
import { ChannelActionTypes } from '../dux/actionTypes';
12-
import { CoreMessageType, isMultipleFilesMessage } from '../../../../utils';
12+
import { CoreMessageType } from '../../../../utils';
1313
import { SdkStore } from '../../../../lib/types';
14+
import { SCROLL_BOTTOM_DELAY_FOR_FETCH } from '../../../../utils/consts';
1415

1516
interface DynamicParams {
1617
isOnline: boolean;
@@ -73,7 +74,6 @@ function useHandleReconnect(
7374
payload: null,
7475
});
7576

76-
let multipleFilesMessageCount = 0;
7777
sdk?.groupChannel?.getChannel(currentGroupChannel?.url)
7878
.then((groupChannel) => {
7979
const lastMessageTime = new Date().getTime();
@@ -90,15 +90,7 @@ function useHandleReconnect(
9090
messages: messages as CoreMessageType[],
9191
},
9292
});
93-
multipleFilesMessageCount = messages.filter((message) => isMultipleFilesMessage(message as CoreMessageType)).length;
94-
setTimeout(
95-
() => utils.scrollIntoLast(0, scrollRef),
96-
/**
97-
* Rendering MFM takes long time so we need this.
98-
* But later we should find better solution.
99-
*/
100-
Math.min(multipleFilesMessageCount * 100, 1000),
101-
);
93+
setTimeout(() => utils.scrollIntoLast(0, scrollRef), SCROLL_BOTTOM_DELAY_FOR_FETCH);
10294
})
10395
.catch((error) => {
10496
logger.error('Channel: Fetching messages failed', error);

‎src/modules/Channel/context/hooks/useInitialMessagesFetch.ts‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@ import { MessageListParams, ReplyType } from '@sendbird/chat/message';
44
import * as utils from '../utils';
55
import * as messageActionTypes from '../dux/actionTypes';
66
import { PREV_RESULT_SIZE, NEXT_RESULT_SIZE } from '../const';
7-
import { CoreMessageType, isMultipleFilesMessage } from '../../../../utils';
7+
import { CoreMessageType } from '../../../../utils';
88
import { MessageListParams as MessageListParamsInternal } from '../ChannelProvider';
99
import { ReplyType as ReplyTypeInternal } from '../../../../types';
1010
import { GroupChannel } from '@sendbird/chat/groupChannel';
1111
import { LoggerInterface } from '../../../../lib/Logger';
1212
import { ChannelActionTypes } from '../dux/actionTypes';
13+
import { SCROLL_BOTTOM_DELAY_FOR_FETCH } from '../../../../utils/consts';
1314

1415
type UseInitialMessagesFetchOptions = {
1516
currentGroupChannel: GroupChannel;
@@ -90,7 +91,6 @@ function useInitialMessagesFetch(
9091
payload: null,
9192
});
9293

93-
let multipleFilesMessageCount = 0;
9494
currentGroupChannel
9595
.getMessagesByTimestamp(
9696
initialTimeStamp || new Date().getTime(),
@@ -104,7 +104,6 @@ function useInitialMessagesFetch(
104104
messages: messages as CoreMessageType[],
105105
},
106106
});
107-
multipleFilesMessageCount = messages.filter((message) => isMultipleFilesMessage(message as CoreMessageType)).length;
108107
})
109108
.catch((error) => {
110109
logger.error('Channel: Fetching messages failed', error);
@@ -115,14 +114,7 @@ function useInitialMessagesFetch(
115114
})
116115
.finally(() => {
117116
if (!initialTimeStamp) {
118-
setTimeout(
119-
() => utils.scrollIntoLast(0, scrollRef, setIsScrolled),
120-
/**
121-
* Rendering MFM takes long time so we need this.
122-
* But later we should find better solution.
123-
*/
124-
Math.min(multipleFilesMessageCount * 100, 1000),
125-
);
117+
setTimeout(() => utils.scrollIntoLast(0, scrollRef, setIsScrolled), SCROLL_BOTTOM_DELAY_FOR_FETCH);
126118
} else {
127119
setTimeout(() => {
128120
utils.scrollToRenderedMessage(

‎src/modules/Channel/context/hooks/useSendFileMessageCallback.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { PublishingModuleType } from '../../../internalInterfaces';
1010
import { LoggerInterface } from '../../../../lib/Logger';
1111
import { SendableMessageType } from '../../../../utils';
1212
import { SendBirdState } from '../../../../lib/types';
13+
import { SCROLL_BOTTOM_DELAY_FOR_SEND } from '../../../../utils/consts';
1314

1415
type UseSendFileMessageCallbackOptions = {
1516
currentGroupChannel: null | GroupChannel;
@@ -55,7 +56,7 @@ export default function useSendFileMessageCallback(
5556
channel: currentGroupChannel,
5657
publishingModules: [PublishingModuleType.CHANNEL],
5758
});
58-
setTimeout(() => utils.scrollIntoLast(0, scrollRef), 1000);
59+
setTimeout(() => utils.scrollIntoLast(0, scrollRef), SCROLL_BOTTOM_DELAY_FOR_SEND);
5960
})
6061
.onFailed((err, failedMessage) => {
6162
logger.error('Channel: Sending file message failed!', { failedMessage, err });

‎src/modules/Channel/context/hooks/useSendMessageCallback.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import topics, { SBUGlobalPubSub } from '../../../../lib/pubSub/topics';
1010
import { PublishingModuleType } from '../../../internalInterfaces';
1111
import { SendableMessageType } from '../../../../utils';
1212
import { LoggerInterface } from '../../../../lib/Logger';
13+
import { SCROLL_BOTTOM_DELAY_FOR_SEND } from '../../../../utils/consts';
1314

1415
type UseSendMessageCallbackOptions = {
1516
isMentionEnabled: boolean;
@@ -82,7 +83,7 @@ export default function useSendMessageCallback(
8283
channel: currentGroupChannel,
8384
publishingModules: [PublishingModuleType.CHANNEL],
8485
});
85-
setTimeout(() => utils.scrollIntoLast(0, scrollRef));
86+
setTimeout(() => utils.scrollIntoLast(0, scrollRef), SCROLL_BOTTOM_DELAY_FOR_SEND);
8687
})
8788
.onFailed((err, msg) => {
8889
logger.warning('Channel: Sending message failed!', { message: msg, error: err });

‎src/modules/Channel/context/hooks/useSendMultipleFilesMessage.ts‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
shouldPubSubPublishToThread,
1515
} from '../../../internalInterfaces';
1616
import { scrollIntoLast as scrollIntoLastForThread } from '../../../Thread/context/utils';
17+
import { SCROLL_BOTTOM_DELAY_FOR_SEND } from '../../../../utils/consts';
1718

1819
export type OnBeforeSendMFMType = (
1920
files: Array<File>,
@@ -108,15 +109,14 @@ export const useSendMultipleFilesMessage = ({
108109
channel: currentChannel,
109110
publishingModules,
110111
});
111-
// We need this delay because rendering MFM takes time due to large image files.
112112
setTimeout(() => {
113113
if (scrollRef && shouldPubSubPublishToChannel(publishingModules)) {
114114
scrollIntoLastForChannel(0, scrollRef);
115115
}
116116
if (shouldPubSubPublishToThread(publishingModules)) {
117117
scrollIntoLastForThread(0);
118118
}
119-
}, 100);
119+
}, SCROLL_BOTTOM_DELAY_FOR_SEND);
120120
})
121121
.onFailed((error, failedMessage: MultipleFilesMessage) => {
122122
logger.error('Channel: Sending MFM failed.', { error, failedMessage });
@@ -134,15 +134,6 @@ export const useSendMultipleFilesMessage = ({
134134
message: succeededMessage,
135135
publishingModules,
136136
});
137-
// We need this delay because rendering MFM takes time due to large image files.
138-
setTimeout(() => {
139-
if (scrollRef && shouldPubSubPublishToChannel(publishingModules)) {
140-
scrollIntoLastForChannel(0, scrollRef);
141-
}
142-
if (shouldPubSubPublishToThread(publishingModules)) {
143-
scrollIntoLastForThread(0);
144-
}
145-
}, 100);
146137
resolve(succeededMessage);
147138
});
148139
} catch (error) {

‎src/modules/Channel/context/hooks/useSendVoiceMessageCallback.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
META_ARRAY_MESSAGE_TYPE_KEY,
1212
META_ARRAY_MESSAGE_TYPE_VALUE__VOICE,
1313
META_ARRAY_VOICE_DURATION_KEY,
14+
SCROLL_BOTTOM_DELAY_FOR_SEND,
1415
VOICE_MESSAGE_FILE_NAME,
1516
VOICE_MESSAGE_MIME_TYPE,
1617
} from '../../../../utils/consts';
@@ -79,7 +80,7 @@ export const useSendVoiceMessageCallback = ({
7980
channel: currentGroupChannel,
8081
publishingModules: [PublishingModuleType.CHANNEL],
8182
});
82-
setTimeout(() => utils.scrollIntoLast(0, scrollRef), 1000);
83+
setTimeout(() => utils.scrollIntoLast(0, scrollRef), SCROLL_BOTTOM_DELAY_FOR_SEND);
8384
})
8485
.onFailed((err, failedMessage) => {
8586
logger.error('Channel: Sending voice message failed!', { failedMessage, err });

‎src/modules/Channel/context/utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const scrollIntoLast = (
4040
}
4141
try {
4242
const scrollDOM = scrollRef?.current || document.querySelector('.sendbird-conversation__messages-padding');
43-
scrollDOM.scrollTop = scrollRef.current.scrollHeight;
43+
scrollDOM.scrollTop = scrollDOM.scrollHeight;
4444
setIsScrolled?.(true);
4545
} catch (error) {
4646
setTimeout(() => {

‎src/modules/Thread/context/hooks/useSendFileMessage.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import topics, { SBUGlobalPubSub } from '../../../../lib/pubSub/topics';
88
import { scrollIntoLast } from '../utils';
99
import { SendableMessageType } from '../../../../utils';
1010
import { PublishingModuleType } from './useSendMultipleFilesMessage';
11+
import { SCROLL_BOTTOM_DELAY_FOR_SEND } from '../../../../utils/consts';
1112

1213
interface DynamicProps {
1314
currentChannel: GroupChannel;
@@ -63,7 +64,7 @@ export default function useSendFileMessageCallback({
6364
},
6465
},
6566
});
66-
setTimeout(() => scrollIntoLast(), 1000);
67+
setTimeout(() => scrollIntoLast(), SCROLL_BOTTOM_DELAY_FOR_SEND);
6768
})
6869
.onFailed((error, message) => {
6970
(message as LocalFileMessage).localUrl = URL.createObjectURL(file);

0 commit comments

Comments
 (0)