Admin UI glitch - double pressing on "Next" page button causes bugged state

[consideRatio]

In the GIF animation below, you see me first click once, move the cursor away, and then press twice in fast succession. Only three clicks are made, but after the double click it gets stuck going back and forth between page 100-150 and page 150-200.

Observed in JupyterHub 4.1.5 20240508073043

[minrk]

Can you test this in 5.0b1? The admin page got lots of changes with the bootstrap 5 update, so it would be nice if this happened to get fixed along the way 🤞

[consideRatio]

I reproduced it once in 5.0.0b2 locally - and then failed to do so in additional attempts, but I think its related to a delay of the response as well - so doing it locally is harder but could perhaps be made reliably reproduced by using a "simulate slow internet" or similar as I think is available in chrome.

[minrk]

Thanks, I can reproduce it easily with 5.0b2 easily by adding time.sleep(0.25) to GET /users.

I think I have a rough idea - if two page fetches are outstanding at the same time, they cycle state changed between them:

• click next - setOfset(10) - sets state offset=10, triggers updateUsers(offset: 10)
• click next - setOfset(20) - sets state offset=20, triggers updateUsers(offset: 20)
• first response comes in - sets offset(10), which is different from offset=20, triggers updateUserr
• repeat with 20/10/20/10/etc.

The problem ultimately stems from the fact that setting the offset state is what triggers the request, but the response also sets the offset state.

If clicking the pagination button triggered the request without setting the state, I think this wouldn't happen, similarly if the reply populated the UI without changing the state, that would also work.

The alternative is some kind of lock to prevent more than one outstanding request at a time.

[minrk]

#4815 fixes this by breaking the cycle