fix(find-replace): debounce find string input to improve performance (#5306)

packages/find-replace/src/views/dialog/FindReplaceDialog.tsx

@@ -18,7 +18,7 @@ import type { IDisposable, Nullable } from '@univerjs/core';
 import type { ForwardedRef } from 'react';
 import { ICommandService, IContextService, LocaleService } from '@univerjs/core';
 import { Button, Checkbox, FormDualColumnLayout, FormLayout, Input, MessageType, Select } from '@univerjs/design';
-import { ILayoutService, IMessageService, useDependency, useObservable } from '@univerjs/ui';
+import { ILayoutService, IMessageService, useDebounceFn, useDependency, useObservable } from '@univerjs/ui';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { fromEvent } from 'rxjs';
 import { ReplaceAllMatchesCommand, ReplaceCurrentMatchCommand } from '../../commands/commands/replace.command';
@@ -64,7 +64,9 @@ export const FindDialog = forwardRef(function FindDialogImpl(_props, ref) {
         commandService.executeCommand(OpenReplaceDialogOperation.id);
     }, [commandService]);
 
-    const onFindStringChange = useCallback((findString: string) => findReplaceService.changeFindString(findString), [findReplaceService]);
+    const onFindStringChange = useDebounceFn((findString: string) => {
+        return findReplaceService.changeFindString(findString);
+    }, 500);
 
     useFindInputFocus(findReplaceService, ref);
 
@@ -77,7 +79,7 @@ export const FindDialog = forwardRef(function FindDialogImpl(_props, ref) {
                 matchesPosition={matchesPosition}
                 findReplaceService={findReplaceService}
                 localeService={localeService}
-                findString={findString}
+                initialFindString={findString}
                 onChange={onFindStringChange}
             />
             <div className="univer-mt-4 univer-text-center">
@@ -183,7 +185,7 @@ export const ReplaceDialog = forwardRef(function ReplaceDialogImpl(_props, ref)
                     matchesPosition={matchesPosition}
                     findReplaceService={findReplaceService}
                     localeService={localeService}
-                    findString={inputtingFindString}
+                    initialFindString={inputtingFindString}
                     onChange={onFindStringChange}
                 />
             </FormLayout>

packages/find-replace/src/views/dialog/SearchInput.tsx

@@ -18,6 +18,7 @@ import type { LocaleService } from '@univerjs/core';
 import type { IInputProps } from '@univerjs/design';
 import type { IFindReplaceService } from '../../services/find-replace.service';
 import { Input, Pager } from '@univerjs/design';
+import { useState } from 'react';
 
 export interface ISearchInputProps extends Pick<IInputProps, 'onFocus' | 'onBlur' | 'className' | 'onChange'> {
     findCompleted: boolean;
@@ -25,11 +26,12 @@ export interface ISearchInputProps extends Pick<IInputProps, 'onFocus' | 'onBlur
     findReplaceService: IFindReplaceService;
     matchesPosition: number;
     matchesCount: number;
-    findString: string;
+    initialFindString: string;
 }
 
 export function SearchInput(props: ISearchInputProps) {
-    const { findCompleted: findComplete, localeService, matchesCount, matchesPosition, findString, findReplaceService, onChange, ...rest } = props;
+    const { findCompleted: findComplete, localeService, matchesCount, matchesPosition, initialFindString, findReplaceService, onChange, ...rest } = props;
+    const [value, setValue] = useState(initialFindString);
     const noResult = findComplete && matchesCount === 0;
     const text = noResult
         ? localeService.t('find-replace.dialog.no-result')
@@ -43,8 +45,11 @@ export function SearchInput(props: ISearchInputProps) {
                 data-u-comp="search-input"
                 autoFocus
                 placeholder={localeService.t('find-replace.dialog.find-placeholder')}
-                value={findString}
-                onChange={(value) => onChange?.(value)}
+                value={value}
+                onChange={(value) => {
+                    setValue(value);
+                    onChange?.(value);
+                }}
                 slot={(
                     <Pager
                         loop