Loading indicator should say what is loading

[aarondr77]

Problem

We have often seen users get confused about the current state of their Mitosheet. In particular, we see this occur when there are long-running operations. The flow that we've observed is:

1. A user performs an operation that takes a long time to complete, like a pivot table with a large number of columns
2. Nothing appears in the sheet after waiting for a few seconds, so the user goes on to perform some other operation.
3. Every additional operation that the user tries to perfom does not work because Mito is still waiting for the pivot table to load.
4. The user ends up in a really confusing state where nothing is loading, they don't know what they are waiting on and they're only option is to end up restarting their kernel and starting over.

Proposed Solution 1

The trickiest part of the loading indicator is that there can be multiple items in queue to load. Currently, we handle this by incrementing loading when sending a new message, and decrementing it when receiving a message. We then display the loading indicator if if loading > 0.

This model works and we don't want to disturb it.

We could change the loading field in the uiState from a number to a (StepType | string)[]. We can't only type it as StepType[] because only _edit messages have step types, but we want to display the loading indicator for things like loading the unique value counts as well.

With this new datatype, instead of incrementing/decrementing the number, we can append/remove from the end of the list when sending or receiving a message. We then display the loading indicator if loading.length > 0

To actually display the message, we can create a mapping from Step Type | string -> string | undefined, where the value is a displayable message or undefined. Something like StepType.Pivot -> 'pivot table'. The loading component will then put that string into something like "Loading pivot table..."

TODO: Understand the order of the events returning. If events are returned in not consistent orders, then this won't work.

Proposed Solution 2

Keep the loading indicator infrastructure as is (increment/decrement the number). And then keep a map from loading number to message.

For example, when we set the loading number, we also set the mapping from idx -> StepType | string. Then, when we display the loading message, we just check the map to get the value and display as we did in the first proposal.

[naterush]

Ok, a few thoughts.

1. Proposal 1 looks like a good start, but you'll probably have to deal with out of order returns (especially with API calls).
2. That's it.

Give it a go, I think... and see if you run into issues. Try and keep all of this as contained as you possibly can - so a loading indicator react component class we already have should be the one dealing with all the mapping to display message!

[naterush]

Oh... I remember 2. I don't know if every message has a response... in which case, figuring out what is loading might be kinda tricky.

I am not sure though. You'll have to dig into the code. I think if this is true it's probably already handled (given that the loading indicator works), so I'd just save that solution.

[aarondr77]

This was implemented and released