From 202b516e92e492959644df0f820333c078e9ceda Mon Sep 17 00:00:00 2001
From: Loup Theron <loup-rodney@hotmail.fr>
Date: Fri, 20 Dec 2024 15:07:54 +0100
Subject: [PATCH] Add debounce of vessel search in pno list

---
 frontend/package-lock.json                          |  1 -
 frontend/package.json                               |  1 -
 .../components/PriorNotificationList/FilterBar.tsx  | 13 ++++++++++---
 .../Reporting/components/ReportingTable/index.tsx   |  2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b8f73acecb..6cccc8245f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,7 +17,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",
diff --git a/frontend/package.json b/frontend/package.json
index 63b45f6469..97a876be25 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/features/PriorNotification/components/PriorNotificationList/FilterBar.tsx b/frontend/src/features/PriorNotification/components/PriorNotificationList/FilterBar.tsx
index 51fcfc599d..8481885864 100644
--- a/frontend/src/features/PriorNotification/components/PriorNotificationList/FilterBar.tsx
+++ b/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>
 
diff --git a/frontend/src/features/Reporting/components/ReportingTable/index.tsx b/frontend/src/features/Reporting/components/ReportingTable/index.tsx
index 5d3d5a825a..c204ff07e9 100644
--- a/frontend/src/features/Reporting/components/ReportingTable/index.tsx
+++ b/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'