From c58312e853da68ef5ae74490ba7839fda891747c Mon Sep 17 00:00:00 2001
From: audric <audric@loki.network>
Date: Wed, 11 Aug 2021 10:48:04 +1000
Subject: [PATCH] do not render typing animation at all if not typing

---
 preload.js                                    |  1 -
 .../conversation/TypingAnimation.tsx          | 63 ++++++++-----------
 ts/components/conversation/TypingBubble.tsx   |  4 ++
 .../session/icon/SessionIconButton.tsx        |  5 +-
 4 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/preload.js b/preload.js
index 76aad1499..506e07695 100644
--- a/preload.js
+++ b/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,
diff --git a/ts/components/conversation/TypingAnimation.tsx b/ts/components/conversation/TypingAnimation.tsx
index 7fd261b35..c24c6c156 100644
--- a/ts/components/conversation/TypingAnimation.tsx
+++ b/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>
+  );
+};
diff --git a/ts/components/conversation/TypingBubble.tsx b/ts/components/conversation/TypingBubble.tsx
index d808424b5..244190fa2 100644
--- a/ts/components/conversation/TypingBubble.tsx
+++ b/ts/components/conversation/TypingBubble.tsx
@@ -29,6 +29,10 @@ export const TypingBubble = (props: TypingBubbleProps) => {
     return <></>;
   }
 
+  if (!props.isTyping) {
+    return null;
+  }
+
   return (
     <TypingBubbleContainer {...props}>
       <TypingAnimation />
diff --git a/ts/components/session/icon/SessionIconButton.tsx b/ts/components/session/icon/SessionIconButton.tsx
index aed2a8c94..3d8638965 100644
--- a/ts/components/session/icon/SessionIconButton.tsx
+++ b/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);