Add debounce of vessel search in pno list

MTES-MCT · Dec 20, 2024 · 202b516 · 202b516
1 parent a0ded4d
commit 202b516
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git 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
@@ -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
@@ -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'