More closely associate actions loading spinner with table

[corywatilo]

When creating an Action and after saving the definition, it isn't clear that a query is being run. This makes it hard to tell if the definition is incorrect, or if a query is actively being run.

After saving a query (with a definition that should return data)...

For several seconds, you get this:

Clicking (browser) refresh, I see a loading icon just below the action name:

Two UX issues:

1. After a few seconds, the table below does end up populating, but there's no spinner in the area, so unless you know where to look for the spinner (just under the action name), it looks like the definition doesn't return any data
2. After initially saving a definition, it doesn't appear the query is being run. I had to refresh the browser to get the spinner, showing me something was happening

(This is on Cloud)

[mariusandra]

@pauldambra I'll assign this one to you as well, as it's connected to the events table, just this one is shown under the "actions" page. It's also a great opportunity to learn about the difference between actions and events under clickhouse... and actions and events under postgres :).

[pauldambra]

There are three "loading" states for the page

1) under the action name we display This action matches 199 events the spinner under the action name is only for the call to count the matching events 2) "calculating action, please hold on" which shows when saving/loading the action itself 3) and then also loading the events to populate the table, this doesn't have a loading state wired up in the page

The slower the network the clearer it is what is happening

1) a whole page spinner 2) then the form loads in and the loading state for 2 shows 3) the action loads and the loading state for 1 shows as the count call can be made now the action is loaded 4) then the events are loaded and there is no indication in the UI that is happening

The mouse tries to highlight the loading states in this gif (simulating a very slow network connection so the events table takes a long time to load)

The quickest fix is to have the events table show a loading state

Ideally (IMHO) there would be one place on this page to look that would show all of these loading states so that once you know where to look you keep getting feedback from the same place

[pauldambra]

so as an example (without making sure that there is enough vertical space for the loader)

That also has a change to the events table to not show the "you have no events" text until it has finished loading and knows if there are any events

@corywatilo would a tidy version of that spinner work for you?

[pauldambra]

opened pull request changes the events table loading so that it looks like this

[pauldambra]

you can better see the before and after of the events table here:

before

after

[clarkus]

related https://github.com/PostHog/posthog/issues/5411 - spinners can be great, but a skeleton screen might improve perceived performance here.

[corywatilo]

Much better, thanks!