Navigating to "commits" tab should have visual feedback

[rudolfs]

On larger projects with many commits there is a substantial delay between clicking on the "commits" tab and actually navigating there. We should at least indicate that there is some activity to the user via a waiting cursor.

Refs: #912.

[sarahscott]

@juliendonck @brandonhaslegs what are you thinking for this one?

[brandonhaslegs]

We've just change the cursor to a cursor: wait; in other scenarios like this.

[MeBrei]

With the new implementation, the commit tab is moved into the horizontal menu which uses the svelte-spa-router and the commits are fetched to show the correct commit count. Before, the commit/branches/contributors tab had a custom routing which allowed to add a click handler to delay switching to the commit tab until it was fully loaded.
With the new implementation, I can see the following options for this:

1. showing cursor: wait after clicking the commit tab. It would already navigate to the commit page and show an empty screen (besides the header etc) until the commits are loaded
2. showing cursor: wait on hover and/or disabling the commit tab until the commits are loaded.

[rudolfs]

I like option nr. 2.

[rudolfs]

To clarify, by "showing cursor: wait on hover and/or disabling", do you mean:

1. user hovers the commits tab, cursor switches to pointer
2. user clicks the commits tab, cursor switches to wait, but we stay on the same screen until the commits are loaded from the backend
3. we display the commits and return the cursor to auto

[MeBrei]

To clarify, by "showing cursor: wait on hover and/or disabling", do you mean:

1. user hovers the commits tab, cursor switches to pointer
2. user clicks the commits tab, cursor switches to wait, but we stay on the same screen until the commits are loaded from the backend
3. we display the commits and return the cursor to auto

I meant that the cursor shows wait or disabled on hover and the tab is not clickable. Once the commits are successfully loaded, the commit tab can be clicked and the cursor is on auto.
I haven't found a way yet to delay the switching of screens with the svelte-spa-router and adding a custom click handler to somehow prevent the router from switching immediately seems odd to me.

[rudolfs]

Ooooh, you mean you would load the commits already when landing on the project source page, and disable the tab until they're loaded?

Hmm, in that case I think we would want some more visual feedback than just a spinning cursor on hover. If the tab is disabled and greyed out initially, I'd be surprised that it suddenly turns enabled.

[MeBrei]

Yes, the commits are already fetched via the main project page, as it also returns the number of commits that is shown in the tab. The horizontal menu shows Commit until the request was successful, then it shows Commit <count>.

[rudolfs]

I wonder if we maybe could further improve the UX by:

• making the tab disabled (greyed out and cursor wait)
• showing the commit count badge, but without the count and with a content placeholder shimmer

I think I'm still fine with option 2 and @brandonhaslegs should have the last call on any micro interactions.