b27e42c484
This PR fixes and improves: - ListQuery provider is now the source of truth for searchParams instead of having components use the `useSearchParams` hook - Various issues with search params and filters sticking around when navigating between collections - Pagination and limits not working inside DocumentDrawer - Searching and filtering causing a flash of overlay in DocumentDrawer, this now only shows for the first load and on slow networks - Preferences are now respected in DocumentDrawer - Changing the limit now resets your page back to 1 in case the current page no longer exists Fixes https://github.com/payloadcms/payload/issues/7085 Fixes https://github.com/payloadcms/payload/pull/8081 Fixes https://github.com/payloadcms/payload/issues/8086
38 lines
1017 B
TypeScript
38 lines
1017 B
TypeScript
'use client'
|
|
import type React from 'react'
|
|
|
|
import { useEffect, useRef } from 'react'
|
|
|
|
type useThrottledEffect = (
|
|
callback: React.EffectCallback,
|
|
delay: number,
|
|
deps: React.DependencyList,
|
|
) => void
|
|
|
|
/**
|
|
* A hook that will throttle the execution of a callback function inside a useEffect.
|
|
* This is useful for things like throttling loading states or other UI updates.
|
|
* @param callback The callback function to be executed.
|
|
* @param delay The delay in milliseconds to throttle the callback.
|
|
* @param deps The dependencies to watch for changes.
|
|
*/
|
|
export const useThrottledEffect: useThrottledEffect = (callback, delay, deps = []) => {
|
|
const lastRan = useRef(Date.now())
|
|
|
|
useEffect(() => {
|
|
const handler = setTimeout(
|
|
() => {
|
|
if (Date.now() - lastRan.current >= delay) {
|
|
callback()
|
|
lastRan.current = Date.now()
|
|
}
|
|
},
|
|
delay - (Date.now() - lastRan.current),
|
|
)
|
|
|
|
return () => {
|
|
clearTimeout(handler)
|
|
}
|
|
}, [delay, ...deps])
|
|
}
|