From 1ca47334f706850c55e32e2441e7aa76da148562 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Wed, 29 Jan 2025 09:18:40 +0000
Subject: [PATCH] Throttle range rebuilding on edits (#23193)

GitOrigin-RevId: 86d9465af663c346805445cd57dd6f6e06049d7b
---
 .../review-panel-new/context/ranges-context.tsx   | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel-new/context/ranges-context.tsx b/services/web/frontend/js/features/review-panel-new/context/ranges-context.tsx
index 019ed5ff00..1384d6f18f 100644
--- a/services/web/frontend/js/features/review-panel-new/context/ranges-context.tsx
+++ b/services/web/frontend/js/features/review-panel-new/context/ranges-context.tsx
@@ -21,6 +21,7 @@ import { postJSON } from '@/infrastructure/fetch-json'
 import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
 import { useConnectionContext } from '@/features/ide-react/context/connection-context'
 import useSocketListener from '@/features/ide-react/hooks/use-socket-listener'
+import { throttle } from 'lodash'
 
 export type Ranges = {
   docId: string
@@ -97,11 +98,15 @@ export const RangesProvider: FC = ({ children }) => {
 
   useEffect(() => {
     if (currentDoc) {
-      const listener = () => {
-        window.setTimeout(() => {
-          setRanges(buildRanges(currentDoc))
-        })
-      }
+      const listener = throttle(
+        () => {
+          window.setTimeout(() => {
+            setRanges(buildRanges(currentDoc))
+          })
+        },
+        500,
+        { leading: true, trailing: true }
+      )
 
       // currentDoc.on('ranges:clear.cm6', listener)
       currentDoc.on('ranges:redraw.cm6', listener)