Pagination with useValueLoadable

[saivanji]

I'm trying to implement a UserInfo component from that example.

When we fetch user for the first time, I would like to display spinner instead of a user box and when user navigates to another user component I would like to fade the component out while we're waiting the next response to come instead of replacing the whole component with spinner for the better UX.

I find it cumbersome to implement with loadable API since it seems not possible to get the data of previous response after we started fetching the new one. valueMaybe function returns undefined

function UserInfo({userID}) {
  const userNameLoadable = useRecoilValueLoadable(userNameQuery(userID));
  
  if (!userNameLoadable.valueMaybe()) {
    return "Initial loading...";
  }
  
  // `valueMaybe` function returns `undefined` here which makes impossible to access previous result.
  if (userNameLoadable.state === "loading") {
    return <User style={{opacity: 0.7}} data={userNameLoadable.valueMaybe()} />
  }
  
  return <User data={userNameLoadable.contents} />
}

[drarmstr]

If you would like to render based on the previous state while the new state is pending, you should ideally be able to use something like the useTransition() hook with experimental React Concurrent Mode. However, this hasn't been fully fleshed out or tested yet. See discussions in #759 and #290

Alternatively, you can try to use something like a usePrevious() hook or maintaining local React state of the previous Recoil state. But, these can lead to issues with inconsistent state since while you may be maintaining a local copy of previous state for some specific atom/selector, whatever you render based on that may also look up other atoms/selectors that may then be inconsistent with your manually saved previous value for the other atom/selector. Thus, it is safer to use proper React Concurrent Mode which is designed to render React component trees with different consistent versions of state.