Fix waste render

CHANGELOG.md

@@ -86,6 +86,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fix [#2243](https://github.com/microsoft/BotFramework-WebChat/issues/2243). Fixed sagas to correctly mark activities with speaking attachments, by [@tdurnford](https://github.com/tdurnford) in PR [#2320](https://github.com/microsoft/BotFramework-WebChat/issues/2320)
 -  Fix [#2365](https://github.com/microsoft/BotFramework-WebChat/issues/2365). Fix Adaptive Card `pushButton` appearance on Chrome, by [@corinagum](https://github.com/corinagum) in PR [#2382](https://github.com/microsoft/BotFramework-WebChat/pull/2382)
 -  Fix [#2379](https://github.com/microsoft/BotFramework-WebChat/issues/2379). Speech synthesis can be configured off by passing `null`, by [@compulim](https://github.com/compulim) in PR [#2408](https://github.com/microsoft/BotFramework-WebChat/pull/2408)
+-  Fix [#2418](https://github.com/microsoft/BotFramework-WebChat/issues/2418). Connectivity status should not waste-render every 400 ms, by [@compulim](https://github.com/compulim) in PR [#2419](https://github.com/microsoft/BotFramework-WebChat/pull/2419)
 
 ### Added
 

packages/component/src/SendBox/ConnectivityStatus.js

@@ -10,18 +10,30 @@ import WarningNotificationIcon from '../Attachment/Assets/WarningNotificationIco
 
 const CONNECTIVITY_STATUS_DEBOUNCE = 400;
 
+function setTimeoutSync(fn, interval) {
+  if (interval > 0) {
+    return setTimeout(fn, interval);
+  }
+
+  fn();
+}
+
 const DebouncedConnectivityStatus = ({ interval, children: propsChildren }) => {
-  const [children, setChildren] = useState(propsChildren);
+  const [children, setChildren] = useState(() => propsChildren);
   const [since, setSince] = useState(Date.now());
 
+  const intervalBeforeSwitch = Math.max(0, interval - Date.now() + since);
+
   useEffect(() => {
-    const timeout = setTimeout(() => {
-      setChildren(propsChildren);
-      setSince(Date.now());
-    }, Math.max(0, interval - Date.now() + since));
+    if (children !== propsChildren) {
+      const timeout = setTimeout(() => {
+        setChildren(() => propsChildren);
+        setSince(Date.now());
+      }, intervalBeforeSwitch);
 
-    return () => clearTimeout(timeout);
-  }, [interval, propsChildren, setChildren, setSince, since]);
+      return () => clearTimeout(timeout);
+    }
+  }, [children, intervalBeforeSwitch, propsChildren]);
 
   return typeof children === 'function' ? children() : false;
 };
@@ -116,17 +128,18 @@ const ConnectivityStatus = ({ connectivityStatus, language, styleSet }) => {
 
   const renderStatus = useCallback(() => {
     if (connectivityStatus === 'connectingslow') {
-      return renderConnectingSlow;
+      return renderConnectingSlow();
     } else if (connectivityStatus === 'error' || connectivityStatus === 'notconnected') {
-      return renderNotConnected;
+      return renderNotConnected();
     } else if (connectivityStatus === 'uninitialized') {
-      return renderUninitialized;
+      return renderUninitialized();
     } else if (connectivityStatus === 'reconnecting') {
-      return renderReconnecting;
+      return renderReconnecting();
     } else if (connectivityStatus === 'sagaerror') {
-      return renderSagaError;
+      return renderSagaError();
     }
-    return renderEmptyStatus;
+
+    return renderEmptyStatus();
   }, [
     connectivityStatus,
     renderConnectingSlow,
@@ -137,6 +150,8 @@ const ConnectivityStatus = ({ connectivityStatus, language, styleSet }) => {
     renderUninitialized
   ]);
 
+  console.log('render');
+
   return (
     <div aria-atomic="false" aria-live="polite" role="status">
       <DebouncedConnectivityStatus