Debouncing a loader with defer

[Rafal-Jenczelewski]

My application has a list-and-details kinda route like following:

Basically, we render a list on the left and when user selects a row from that list, a panel opens up on the right to show details of that item. The right-side panel is its own route and has a loader defined:

{
  path: "items",
  loader: itemsRouteLoader,
  element: <ItemsGrid/>
  children: [{
    path: ":id",
    loader: itemDetailsRouteLoader,
    element: <DetailsPanel/>
  }]
}

function itemDetailsRouteLoader() {
  return defer({
    data1: fetchData1(),
    data2: fetchData2()
  })
}

The details of fetchData are not important.

The problem
With this implementation we make way too many requests - user may be just scrolling to the bottom of the list using keyboard and we will load each and every item on the page, so we need to start fetching only when user stopped scrolling. To achieve this I implemented basic debounce logic:

function itemDetailsRouteLoader({ request }) {
  return new Promise(resolve => {
    setTimeout(() => {
      if (request.signal.aborted) {
        resolve(null);
        return;
      }

      resolve(defer({
        data1: fetchData1(),
        data2: fetchData2()
      }));
    }, 500)
  })
}

While this works, it has the unfortunate effect of delaying every navigation by half a second which is noticeable for the user. The problem is that I don't see a better solution without abandoning loaders for this route. We cannot move the debounce to fetchData, because router does not abort requests if loader has resolved:

function itemDetailsRouteLoader({ request }) {
  return defer({
    data1: fetchData1(request),
    data2: fetchData2(request)
  })
}

// Will not work, cause request.signal is never aborted as loader returns immediately 
function fetchData1(request) {
  return new Promise(resolve => {
    setTimeout(() => {
      if (request.signal.aborted) {
        return;
      }
      //do the fetch
    }, 500)
  })
}

My question is: assuming that I cannot change the UI design, is there a better pattern for this or should I propose new feature?

[brophdawg11]

when user selects a row from that list, a panel opens up on the right to show details of that item

With this implementation we make way too many requests - user may be just scrolling to the bottom of the list using keyboard and we will load each and every item on the page, so we need to start fetching only when user stopped scrolling

This feels to me like you're trying to do the debounce too deep. You fetch data on a navigation from /items/1 -> /items/2. But it sounds like you are allowing scrolling down via the keyboard to trigger a navigation, which I don't think sounds right. You only want to navigate when the user chooses an item in the list. With a mouse this would be a click, with keyboard it could be an Enter keypress. And if you want "automatic" navigation you could chose to programmatically navigate when they settle on an item for a period of time.

So I don't think you want to debounce the load, I think you want to debounce the programatic navigation. That way if they focus the next item before the debounce settles it'll never navigate to the interim list item in the first place. And then you can allow clicks/and enter key presses to trigger non-debounced navigations (which should happen automatically if you use <Link> components for the items).

FWIW I also don't think you need defer here as all the information you're working with feels critical to me.

[Rafal-Jenczelewski]

Implemented debouncing of navigation and you are right, it works quite nicely. Thanks!