Вот как раз вчера делал такую штуку прям внутри компонента, плюс с искусственной задержкой:
const [isLoadingFx, setStateFx] = React.useState(false)
const [isLoadingDelay, setStateDelay] = React.useState(false)
React.useEffect(() => {
const unsubscribeStart =
effectFx.watch(payload => {
if (
payload.id === id) {
setStateFx(true)
setStateDelay(true)
setTimeout(() => {
setStateDelay(false)
}, 300)
}
})
const unsubscribeEnd =
effectFx.finally.watch(payload => {
if (
payload.params.id === id) {
setStateFx(false)
}
})
return () => {
unsubscribeStart()
unsubscribeEnd()
}
}, [id])
const isLoading = isLoadingDelay || isLoadingFx