Report loading progress for complex selectors to users

[openventures]

What is currently the recommended way to show loading progress / information to a user for long loading selectors.

e.g.

const myQuery = selector({
  key: 'myQuery',
  get: async () => {
    const parts: Array<any> = [];
    let upper_bound = Number.MAX_SAFE_INTEGER;
    for (let safeGuard = 0; safeGuard < 10; safeGuard++) {
      const res = await fetch('/query?limit=10&upper_bound=' + upper_bound);
      const { next_upper_bound, data } = await res.json();
      parts.push(...data);
      upper_bound = next_upper_bound;
      if (data.length < 10) break;
    }
    return parts;
  },
});

showing something like a progress indicator like "Loaded xx parts..." is not possible with this scenario.

Extracting the loop body into it's own selectors and using waitForNone, doesn't work without a lot hacks, since the calls need to be performed in sequence...

In the past I used special loader classes (stored in mutable atoms (yikes)) to simulate pages again, to use the waitForNone approach, but this isn't very composable and still feels hacky.

In an ideal world, I would wish for an api like:

selector({
  get: async ({ get, set}) => {
    for (...)
      set(loadingProgressAtom, (c) => c + data.length)
  }
})

to update an loading progress atom from the selector get function (but I understand why this will result in all kinds of issues).

using hooks to manage this feels a bit wrong, especially if the base loading selectors is also used by multiple other selectors down stream, that would mean having a hook useMyQuery(), but then using useRecoilValue(secondSelector) and thus leaking the internals of secondSelector to the consumer.

So I guess my question is, how do you handle these types of paginated data sources, where you want to load the results at once.

Before anyone says, "let the user paginate using UI controls, instead of loading everything up front", an example use case would be a frontend using a generic api to generate a big CSV export, without having an API endpoint to do it server side, and low limits for page sizes.

[guykleiman]

I am facing something close to this, I want to set the state of an atom for error handling when using an axios request, but I can't find a way to use it. in my case I use react-toastify and it needed to be used in a tsx file, so i use the atom for that.