Welcome loading and connecting dialogue

[jimmcgaw]

A simple welcome message and "connecting" indicator dialogue when the user first loads the page. Also renders an alert that indicates a new room was created or an existing one joined.

This is meant in part to address #200

Also meant to address a slight usability issue, in that the username dialog form isn't responsive to user input until the connection has been established anyway. This would almost certainly be frustrating for quick-fingered users experiencing initial connection latency.

[elimisteve]

@jimmcgaw Thanks for doing this, but honestly I think this makes the app load time feel significantly slower because of the 2 modals instead of 1, plus the light that flashes between modals kind of hurts my eyes; could be annoying for people. Instead of a modal to show progress, how about we use react-toastify to tell them they're connected to the server, then that message fades after maybe 2 seconds? Toasts could even show the different stages of connecting that you laid out (but as toasts rather than a modal!).

LeapChat issue: #139

The react-toastify settings we used for a previous code base; some variant of this seems appealing to me: https://github.com/PursuanceProject/pursuance/blob/179b502c1a4fe65f4468beb7cc9797b66e151abf/src/components/Content/TaskHierarchy/TaskHierarchy.js#L144 plus https://github.com/PursuanceProject/pursuance/blob/179b502c1a4fe65f4468beb7cc9797b66e151abf/src/components/Content/TaskHierarchy/TaskHierarchy.js#L34

[jimmcgaw]

react-toastify looks cools, and I'm game to add it. I'd want to consider using that when we add "message failed to send" notifications, on transmission errors.

But, this was not intended to solve the problem of "inform the user about their connection status". When the username modal first comes up, it remains unresponsive to submitting until the connection has succeeded. If there's latency in establishing the connection, the set username button might seem broken. There is an alert in place, but it's in the background, partially obscured by the modal, so that doesn't help clarify the situation. I think react-toastify would have the same issue in this case.

This also makes it clear, right from the first, whether a room was created or if you're joining one. It does this before we ask for a username. But, admittedly, if this is important, then it might go away (connection is established) before they get a chance to read it.

If two modals isn't great, we could alternatively: put the "loading" indicator onto the username form, and show the username form, but have the "Set Username" button disabled with a loading indicator, so it's clear that they cannot submit it until the thing that is happening is done. Any messaging from the "Welcome" modal (or any other stuff) could be put onto the username form, so they can read it at their leisure.

I don't particularly care if we solve this problem; but, I think it is a problem that merits consideration. I'll set to draft and we can discuss at some point, if you ever wish to.

[elimisteve]

When the username modal first comes up, it remains unresponsive to submitting until the connection has succeeded. If there's latency in establishing the connection, the set username button might seem broken. There is an alert in place, but it's in the background, partially obscured by the modal, so that doesn't help clarify the situation. I think react-toastify would have the same issue in this case.

Good point.

If two modals isn't great, we could alternatively: put the "loading" indicator onto the username form, and show the username form, but have the "Set Username" button disabled with a loading indicator, so it's clear that they cannot submit it until the thing that is happening is done. Any messaging from the "Welcome" modal (or any other stuff) could be put onto the username form, so they can read it at their leisure.

Great idea! That seems clean and cohesive 👌 .

[elimisteve]

Very nice 👍 . Merging!

The initial modal is starting to look a bit busy, and there are old issues with the "Generate Random Username" button not really being aligned with anything, but I think we can solve both issues by doing what Effective does, where to the right of the username input field there's a 🎲 the user can click to get a new random username.