Add a progress indicator

[saseestone]

Symphony can be slow to respond at times, so I think we'll need a progress indicator added. Definitely for page load, but perhaps even for actions like renew (particularly when users have 100+ to renew) and pay bill.

[cbeer]

There's the thing turbolinks gives us by default (that little blue bar at the top of the page) 🤷‍♂

[saseestone]

yes, but it's pretty subtle in the desktop view. (Pretty noticeable on mobile though...)

Would prefer an in-yo-face indicator I think. @jvine?

[jvine]

I think part of the issue is turbolinks itself, in the way that the current page remains in place until the new page is loaded. If the destination page is slow, it can look like the click just didn't work.

@cbeer Do we have any control over the visual design (size, colour) of the default indicator?

[mejackreed]

It seems like there are some options: https://github.com/turbolinks/turbolinks#displaying-progress

However, by styling here it will be inconsistent with users loading experience in other Stanford rails apps that use turbolinks.

[shelleydoljack]

In looking at the log for our 300 books user, on -uat it takes 17 seconds for web services to deliver the payload. We could look into giving tomcat more memory ( https://github.com/sul-dlss/puppet/blob/51c2e891a2a1c1602b8902d44474975d8ed7dc7c/hieradata/node/symphony-webservices-prod.stanford.edu.eyaml#L45 ).

[jvine]

So what I'm experiencing with 300BOOKS is that when I click Checkouts, there is a few-seconds pause before the page changes, but there's no progress indicator during that time. Then the page appears to load in its entirety and the turbo link starts growing across the top. So basically, I see content on the page before I see a progress indicator.

And then it only goes part way across the top, so the more visible it is, the more it looks like the page didn't complete loading (never got to 100%).

To me, the issue is more that something should happen at the moment the user clicks the link, so they know it was successful.

[jvine]

Can we use the bootstrap spinner, centered around the icon, when the user clicks on one of the top tabs? And it will go away when the target page actually loads. In some cases, the user will see both the turbolink and the spinner (first time click) and in others, they'll see spinner then turbolink.

This doesn't address the slowness of initial login. Not sure if there is anything we can feasibly do there. A spinner on the button itself might help for users who are already logged in, but if they have to go through webauth, the delay will happen later.