Préavis - Ajouter un debounce dans les filtres de la liste des préavis (

#3986)

## Linked issues

- Resolve #3773

----

- [ ] Tests E2E (Cypress)

frontend/package.json

@@ -42,7 +42,6 @@
     "@sentry/vite-plugin": "^2.22.6",
     "@tanstack/react-table": "8.20.5",
     "@tanstack/react-virtual": "3.11.2",
-    "@tanstack/virtual-core": "3.11.2",
     "comlink": "4.4.2",
     "date-fns": "3.6.0",
     "dayjs": "1.11.13",

frontend/src/features/PriorNotification/components/PriorNotificationList/FilterBar.tsx

@@ -22,8 +22,9 @@ import {
 } from '@mtes-mct/monitor-ui'
 import { assertNotNullish } from '@utils/assertNotNullish'
 import { uniq } from 'lodash'
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import styled from 'styled-components'
+import { useDebouncedCallback } from 'use-debounce'
 
 import {
   LAST_CONTROL_PERIODS_AS_OPTIONS,
@@ -41,6 +42,7 @@ export function FilterBar() {
   const dispatch = useMainAppDispatch()
   const isSuperUser = useIsSuperUser()
   const { newWindowContainerRef } = useNewWindow()
+  const [searchQuery, setSearchQuery] = useState<string | undefined>(undefined)
   const listFilterValues = useMainAppSelector(store => store.priorNotification.listFilterValues)
 
   const { fleetSegmentsAsOptions } = useGetFleetSegmentsAsOptions()
@@ -104,8 +106,13 @@ export function FilterBar() {
     dispatch(priorNotificationActions.setListFilterValues({ priorNotificationTypes: nextPriorNotificationTypes }))
   }
 
-  const updateSearchQuery = (nextSearchQuery: string | undefined) => {
+  const updateSliceSearchQuery = useDebouncedCallback((nextSearchQuery: string | undefined) => {
     dispatch(priorNotificationActions.setListFilterValues({ searchQuery: nextSearchQuery }))
+  }, 250)
+
+  const updateSearchQuery = (nextSearchQuery: string | undefined) => {
+    setSearchQuery(nextSearchQuery)
+    updateSliceSearchQuery(nextSearchQuery)
   }
 
   const updateSpecyCodes = (nextSpecyCodes: string[] | undefined) => {
@@ -132,7 +139,7 @@ export function FilterBar() {
           onChange={updateSearchQuery}
           placeholder="Rechercher un navire"
           size={Size.LARGE}
-          value={listFilterValues.searchQuery}
+          value={searchQuery}
         />
       </Row>
 

frontend/src/features/Reporting/components/ReportingTable/index.tsx

@@ -16,7 +16,7 @@ import { useTableVirtualizer } from '@hooks/useTableVirtualizer'
 import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 import { Icon, IconButton, TableWithSelectableRows, THEME } from '@mtes-mct/monitor-ui'
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table'
-import { notUndefined } from '@tanstack/virtual-core'
+import { notUndefined } from '@tanstack/react-virtual'
 import { downloadAsCsv } from '@utils/downloadAsCsv'
 import { isLegacyFirefox } from '@utils/isLegacyFirefox'
 import { pluralize } from '@utils/pluralize'