fix: clear composer state optimistically with snapshot restoration upon sending a message (#2710)

Make the clearing of the MessageInput UI immediate without any delay
when sending a message.

Author: MartinCupela

src/components/MessageInput/hooks/useSubmitHandler.ts

@@ -4,6 +4,26 @@ import { useChannelActionContext } from '../../../context/ChannelActionContext';
 import { useTranslationContext } from '../../../context/TranslationContext';
 
 import type { MessageInputProps } from '../MessageInput';
+import type { MessageComposer } from 'stream-chat';
+
+const takeStateSnapshot = (messageComposer: MessageComposer) => {
+  const textComposerState = messageComposer.textComposer.state.getLatestValue();
+  const attachmentManagerState = messageComposer.attachmentManager.state.getLatestValue();
+  const linkPreviewsManagerState =
+    messageComposer.linkPreviewsManager.state.getLatestValue();
+  const pollComposerState = messageComposer.pollComposer.state.getLatestValue();
+  const customDataManagerState = messageComposer.customDataManager.state.getLatestValue();
+  const state = messageComposer.state.getLatestValue();
+
+  return () => {
+    messageComposer.state.next(state);
+    messageComposer.textComposer.state.next(textComposerState);
+    messageComposer.attachmentManager.state.next(attachmentManagerState);
+    messageComposer.linkPreviewsManager.state.next(linkPreviewsManagerState);
+    messageComposer.pollComposer.state.next(pollComposerState);
+    messageComposer.customDataManager.state.next(customDataManagerState);
+  };
+};
 
 export const useSubmitHandler = (props: MessageInputProps) => {
   const { clearEditingState, overrideSubmitHandler } = props;
@@ -29,7 +49,9 @@ export const useSubmitHandler = (props: MessageInputProps) => {
           addNotification(t('Edit message request failed'), 'error');
         }
       } else {
+        const restoreComposerStateSnapshot = takeStateSnapshot(messageComposer);
         try {
+          messageComposer.clear();
           // todo: get rid of overrideSubmitHandler once MessageComposer supports submission flow
           if (overrideSubmitHandler) {
             await overrideSubmitHandler({
@@ -41,10 +63,10 @@ export const useSubmitHandler = (props: MessageInputProps) => {
           } else {
             await sendMessage({ localMessage, message, options: sendOptions });
           }
-          messageComposer.clear();
           if (messageComposer.config.text.publishTypingEvents)
             await messageComposer.channel.stopTyping();
         } catch (err) {
+          restoreComposerStateSnapshot();
           addNotification(t('Send message request failed'), 'error');
         }
       }