Generate Recorder / Send Invites to Candidates User Feedback on Click

[ddfridley]

After you hit generate moderator recorder, or send invites to candidates, on a slow link there may be a long delay before the response is received by the browser. The user needs some feedback that things are going on behind the sceens. The button will go dark (disableOnClick) when initiated, and on success it goes to the next panel, but there could be a delay of several seconds so we need to let the user know it's working.

[mattwinne]

I got the repo and db up and running. I'll begin working on this issue.

[ddfridley]

Well it's great progress that you've got things working and that you've made your first PR so quickly, but I don't see a spinner. I'm not sure where you put the sleep when you were testing. but I created a new test in stories/moderator-recorder.stories.js called ReadyLongDelIay and I added a hack to .storybook/preview.js so that tests can set _serverResponseDelay.

If you did git push -u when you pushed the repo then you should be able to do a git pull and get the update. Otherwise just look at the branch on github, its a small change.

Also, I haven't seen it so I don't know, but I think it might be smoother if the spinner just appeared but the button didn't go away. But I'll know better after I see it.

[ddfridley]

To test it with the dev server, on the browser side you can open the developer console and select the "Network" tab and then where it says "No throttling" you can pick slow 3G or maybe make a custom one that's even slower. But you won't want to throttle until after the app is loaded.

[mattwinne]

Appreciate the helpful feedback and tips. FYI, I simulated the delay within the component like this:

const delay = delayInms => {
    return new Promise(resolve => setTimeout(resolve, delayInms))
}

const handleOnClick = async () => {
    setAwaitingResponse(true)
    if (!disabled && !disabledAfterClick) {
        let delayres = await delay(1000)
        await onDone({ valid: true })
    }
    if (disableOnClick) setDisabledAfterClick(true)
    setAwaitingResponse(false)
}

Although, using the test you put together and suggested dev tools throttling will more closely replicate the issue so I'll certainly try those out next.

As far as how to show the spinner, I agree there is likely a smoother way to do it. Initially I had it appear next to the button, which caused some other elements to shift which I didn't like. That led me to just temporarily replace the button with the spinner. Perhaps, a better option might be to show the spinner in the middle of the screen like it already does for the configure-election component. Might be able to trigger it via useContext hook.

I'll have some time this weekend to work on it.

[mattwinne]

@ddfridley See new commit. Was able to get the spinner to render on the tests you put together and with throttling. This approach retains the buttons and shows the spinner below. What do you think? Should I take the same approach for sendCandidateInvitations in the CandidateTable component?