do not render typing animation at all if not typing

preload.js

@@ -49,7 +49,6 @@ window.isBehindProxy = () => Boolean(config.proxyUrl);
 window.getStoragePubKey = key => (window.isDev() ? key.substring(2) : key);
 
 window.getDefaultFileServer = () => config.defaultFileServer;
-window.initialisedAPI = false;
 
 window.lokiFeatureFlags = {
   useOnionRequests: true,

ts/components/conversation/TypingAnimation.tsx

@@ -1,40 +1,29 @@
 import React from 'react';
 import classNames from 'classnames';
 
-interface Props {
-  color?: string;
-}
-
-export class TypingAnimation extends React.Component<Props> {
-  public render() {
-    const { color } = this.props;
-
-    return (
-      <div className="module-typing-animation" title={window.i18n('typingAlt')}>
-        <div
-          className={classNames(
-            'module-typing-animation__dot',
-            'module-typing-animation__dot--first',
-            color ? `module-typing-animation__dot--${color}` : null
-          )}
-        />
-        <div className="module-typing-animation__spacer" />
-        <div
-          className={classNames(
-            'module-typing-animation__dot',
-            'module-typing-animation__dot--second',
-            color ? `module-typing-animation__dot--${color}` : null
-          )}
-        />
-        <div className="module-typing-animation__spacer" />
-        <div
-          className={classNames(
-            'module-typing-animation__dot',
-            'module-typing-animation__dot--third',
-            color ? `module-typing-animation__dot--${color}` : null
-          )}
-        />
-      </div>
-    );
-  }
-}
+export const TypingAnimation = () => {
+  return (
+    <div className="module-typing-animation" title={window.i18n('typingAlt')}>
+      <div
+        className={classNames(
+          'module-typing-animation__dot',
+          'module-typing-animation__dot--first'
+        )}
+      />
+      <div className="module-typing-animation__spacer" />
+      <div
+        className={classNames(
+          'module-typing-animation__dot',
+          'module-typing-animation__dot--second'
+        )}
+      />
+      <div className="module-typing-animation__spacer" />
+      <div
+        className={classNames(
+          'module-typing-animation__dot',
+          'module-typing-animation__dot--third'
+        )}
+      />
+    </div>
+  );
+};

ts/components/conversation/TypingBubble.tsx

@@ -29,6 +29,10 @@ export const TypingBubble = (props: TypingBubbleProps) => {
     return <></>;
   }
 
+  if (!props.isTyping) {
+    return null;
+  }
+
   return (
     <TypingBubbleContainer {...props}>
       <TypingAnimation />

ts/components/session/icon/SessionIconButton.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { SessionIcon, SessionIconProps } from '../icon';
 import { SessionNotificationCount } from '../SessionNotificationCount';
 import { DefaultTheme, useTheme } from 'styled-components';
+import _ from 'lodash';
 
 interface SProps extends SessionIconProps {
   onClick?: any;
@@ -12,7 +13,7 @@ interface SProps extends SessionIconProps {
   isHidden?: boolean;
 }
 
-export const SessionIconButton = (props: SProps) => {
+const SessionIconButtonInner = (props: SProps) => {
   const {
     iconType,
     iconSize,
@@ -56,3 +57,5 @@ export const SessionIconButton = (props: SProps) => {
     </div>
   );
 };
+
+export const SessionIconButton = React.memo(SessionIconButtonInner, _.isEqual);