[Perf] Composer: Better sending animation for old/slow iPhones (#1252)

src/components/middle/composer/Composer.tsx

@@ -19,7 +19,7 @@ import {
 import { LangCode } from '../../../types';
 
 import { EDITABLE_INPUT_ID, SCHEDULED_WHEN_ONLINE } from '../../../config';
-import { IS_VOICE_RECORDING_SUPPORTED, IS_SINGLE_COLUMN_LAYOUT } from '../../../util/environment';
+import { IS_VOICE_RECORDING_SUPPORTED, IS_SINGLE_COLUMN_LAYOUT, IS_IOS } from '../../../util/environment';
 import {
   selectChat,
   selectIsChatWithBot,
@@ -50,6 +50,7 @@ import deleteLastCharacterOutsideSelection from '../../../util/deleteLastCharact
 import { pick } from '../../../util/iteratees';
 import buildClassName from '../../../util/buildClassName';
 import { isSelectionInsideInput } from './helpers/selection';
+import applyIosAutoCapitalizationFix from './helpers/applyIosAutoCapitalizationFix';
 
 import useFlag from '../../../hooks/useFlag';
 import useVoiceRecording from './hooks/useVoiceRecording';
@@ -442,6 +443,8 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
       return;
     }
 
+    const messageInput = document.getElementById(EDITABLE_INPUT_ID)!;
+
     if (currentAttachments.length || text) {
       if (slowMode && !isAdmin) {
         const nowSeconds = Math.floor(Date.now() / 1000) + serverTimeOffset;
@@ -464,7 +467,6 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
             },
           });
 
-          const messageInput = document.getElementById(EDITABLE_INPUT_ID)!;
           messageInput.blur();
 
           return;
@@ -487,6 +489,10 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
 
     clearDraft({ chatId, localOnly: true });
 
+    if (IS_IOS && messageInput === document.activeElement) {
+      applyIosAutoCapitalizationFix(messageInput);
+    }
+
     // Wait until message animation starts
     requestAnimationFrame(resetComposer);
   }, [

src/components/middle/composer/MessageInput.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent } from 'react';
 import React, {
-  FC, useEffect, useRef, memo, useState, useCallback, useLayoutEffect,
+  FC, useEffect, useRef, memo, useState, useCallback,
 } from '../../../lib/teact/teact';
 import { withGlobal } from '../../../lib/teact/teactn';
 
@@ -22,7 +22,6 @@ import useFlag from '../../../hooks/useFlag';
 import parseEmojiOnlyString from '../../common/helpers/parseEmojiOnlyString';
 import { isSelectionInsideInput } from './helpers/selection';
 import useLang from '../../../hooks/useLang';
-import applyIosAutoCapitalizationFix from './helpers/applyIosAutoCapitalizationFix';
 
 import TextFormatter from './TextFormatter';
 
@@ -105,12 +104,6 @@ const MessageInput: FC<OwnProps & StateProps & DispatchProps> = ({
     updateInputHeight(false);
   }, []);
 
-  useLayoutEffect(() => {
-    if (IS_IOS && !html && inputRef.current === document.activeElement) {
-      applyIosAutoCapitalizationFix(inputRef.current!);
-    }
-  }, [html]);
-
   useLayoutEffectWithPrevDeps(([prevHtml]) => {
     if (html !== inputRef.current!.innerHTML) {
       inputRef.current!.innerHTML = html;

src/modules/actions/api/messages.ts

@@ -53,6 +53,7 @@ import {
 } from '../../selectors';
 import { rafPromise, throttle } from '../../../util/schedulers';
 import { copyTextToClipboard } from '../../../util/clipboard';
+import { IS_IOS } from '../../../util/environment';
 
 const uploadProgressCallbacks = new Map<number, ApiOnProgress>();
 
@@ -740,7 +741,7 @@ async function sendMessage(params: {
   } : undefined;
 
   // @optimization
-  if (params.replyingTo) {
+  if (params.replyingTo || IS_IOS) {
     await rafPromise();
   }