From d04edb60b92684560cbf1d321a909c2ad663fe17 Mon Sep 17 00:00:00 2001
From: JonathanTGold <62672270+JonathanTGold@users.noreply.github.com>
Date: Sun, 24 Mar 2024 13:14:25 +0100
Subject: [PATCH] fix(FEC-13784): Search event is sent too often - need to be
 debounced for minimum 2 sec (#181)

* fix(FEC-13784): Search event is sent too often - need to be debounced for minimum 2 sec

---------

Co-authored-by: JonathanTGold <jonathan.gold@86@gmail.com>
---
 src/components/transcript/transcript.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/transcript/transcript.tsx b/src/components/transcript/transcript.tsx
index 986524a..b40e232 100644
--- a/src/components/transcript/transcript.tsx
+++ b/src/components/transcript/transcript.tsx
@@ -21,6 +21,8 @@ const {SidePanelModes} = ui;
 const {PLAYER_BREAK_POINTS} = ui.Components;
 const {connect} = ui.redux;
 
+const SEARCH_EVENT_DISPATCH_TIMEOUT = 2000;
+
 const translates = {
   skipTranscript: <Text id="transcript.skip_transcript">Skip transcript</Text>,
   errorTitle: <Text id="transcript.whoops">Whoops!</Text>,
@@ -170,7 +172,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
           searchMap[caption.id] = {...searchMap[caption.id], [index]: i};
         });
       });
-      this.props.dispatcher(TranscriptEvents.TRANSCRIPT_SEARCH, {search: state.search});
+      this._debounced.searchEventDispatcher(state);
       return {
         searchMap,
         totalSearchResults: index,
@@ -180,6 +182,10 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
     });
   };
 
+  private _dispatchSearchEvent = (state: TranscriptState) => {
+    this.props.dispatcher(TranscriptEvents.TRANSCRIPT_SEARCH, {search: this.state.search});
+  }
+
   private _setActiveSearchIndex = (index: number) => {
     this._scrollToSearchMatchEnabled = true;
     this.setState({
@@ -373,7 +379,8 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
 
   private _debounced = {
     findSearchMatches: debounce(this._findSearchMatches, this.props.searchDebounceTimeout),
-    onActiveSearchIndexChange: debounce(this._setActiveSearchIndex, this.props.searchNextPrevDebounceTimeout)
+    onActiveSearchIndexChange: debounce(this._setActiveSearchIndex, this.props.searchNextPrevDebounceTimeout),
+    searchEventDispatcher: debounce(this._dispatchSearchEvent, SEARCH_EVENT_DISPATCH_TIMEOUT)
   };
 
   render(props: TranscriptProps) {