[experimental] [suspense] Show loading indicator on currently loading link

[phaux]

So there's a useLocationPending hook which is great. I want to display an indicator when the next page is loading, but only on the button which triggered navigation to that page.

I can put the last clicked button in state and if the location is pending then I can render the indicator, but the problem with it is that if the user clicks a link in other component, then the indicator won't disappear. I'd need to have some kind of global state which just holds last clicked link, but that seems like a hack.

It would be nice if useLocationPending would return the url it's transitioning to or null when not transitioning.

[MeiKatz]

In this case it should be renamed to usePendingLocation ...

[phaux]

Since I asked that I figured another solution is to handle it in the custom Button/Link implementation which wraps onClick in useTransition and adds appropriate pending styles. The downside is that now every button has this behavior, but it was recommended by react devs so I guess it's okay.

[MeiKatz]

You can add a prop like showSpinner and if it is present / true then the described behaviour is added. Otherwise it's just a simple button.

[gopeter]

@phaux do you have a Codesandbox or anything like this? It would be great to have a look at your solution :)

[phaux]

The correct way is to have a button which does this (typing from memory):

function Button(props) {
  const { children, onClick } = props
  const [isPending, startTransition] = useTransition()
  return (
    <button onClick={event => startTransition(() => onClick(event))}>
      {isPending && <Spinner />}
      {children}
    </button>
  )
}

And then use it somewhere like this:

const navigate = useNavigate()
return <Button onClick={() => navigate("path")}>Go</Button>

And it should render a spinner on the last clicked button until the next page fully loads in background.

[gopeter]

Great, thanks a lot!