From 14baef4e3636acd0419223bc7d84ca740bba5988 Mon Sep 17 00:00:00 2001
From: janWilejan <119548498+janWilejan@users.noreply.github.com>
Date: Thu, 13 Jul 2023 19:36:21 +0000
Subject: [PATCH] remove excess resize event listeners (#3169)

We add a resize handler to the window when the ChatContainer is created. If a
second ChatContainer is created due to React redrawing, remove the old handler.

Co-authored-by: janWilejan <>
---
 .../chat/ChatContainer/ChatContainer.tsx           | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index 388014716..feaccb2cb 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -33,6 +33,8 @@ export type ChatContainerProps = {
   desktop?: boolean;
 };
 
+let resizeWindowCallback: () => void;
+
 function shouldCollapseMessages(message: ChatMessage, previous: ChatMessage): boolean {
   if (!message || !message.user) {
     return false;
@@ -290,13 +292,21 @@ export const ChatContainer: FC<ChatContainerProps> = ({
   }
 
   // Re-clamp the chat size whenever the window resizes
-  window.addEventListener('resize', () => {
+  function resize() {
     const container = desktop && document.getElementById('chat-container');
     if (container) {
       const currentWidth = parseFloat(container.style.width) || defaultChatWidth;
       container.style.width = `${clampChatWidth(currentWidth)}px`;
     }
-  });
+  }
+
+  if (resizeWindowCallback) window.removeEventListener('resize', resizeWindowCallback);
+  if (desktop) {
+    window.addEventListener('resize', resize);
+    resizeWindowCallback = resize;
+  } else {
+    resizeWindowCallback = null;
+  }
 
   return (
     <ErrorBoundary