Fetch requests pile up during rapid pagination

[JimFung]

As in..when you are jumping through multiple pages its making a request for each page? This seems solvable by wrapping the request in question with a debounce method to take only the latest request, perhaps in dispatch.js.

[jumbosushi]

As of now:

Debounce method something like this would prob do the job, but it might mess up with react router's internal history obj

One way might be like

    <Link
      to={props.to}
      role='button'
      onClick={e => {
        e.preventDefault()
        if (!props.disabled) {
          // Debouce & call last request after 250 milisec
          debounce(() => { location.href = props.to }, 250)
        }
      }}>
      <Button {...props}>
        {props.children}
      </Button>
    </Link>

but the history obj's problem is still there. Asked the question on react router disccord so hopefully someone will help us out

[JimFung]

Looking at the source for Link, I think you're right. If you want to have an entry for each page between the starting and end page (which is what it sounds like you want) I think the debouncing has to happen at the api level (ie. think takeLatest from redux-sagas), but I'll defer to whatever people in the react router discord say cause they've almost definitely run into this issue before.

[psiemens]

@jumbosushi for reference

Resource list action: https://github.com/ubyssey/dispatch/blob/develop/dispatch/static/manager/src/js/util/redux/actions.js#L85-L97

Example of manually triggering pending and fulfilled actions: https://github.com/ubyssey/dispatch/blob/develop/dispatch/static/manager/src/js/util/redux/actions.js#L129-L164