RefreshLess: Loading feedback needs to be more obvious in compact mode

[Ambient-Impact]

The progress bar seems fine on its own on desktop, but on mobile it doesn't always grab your attention as you're holding the screen closer to your face and usually vertically, looking down around the middle or bottom of the viewport. There are multiple ways we could make this more obvious.

Drawing attention to the header

We could force the header to be visible and lock it to visible when the progress bar appears. This could be a great way to draw attention to the top of the screen since the header will transition in if not already visible.

We could probably add some kind of flash to the background if already visible to draw attention to it if that's not enough.

See also #30

Inline loading bars

Since you're likely already looking in the general area of the link you just clicked, it would make sense from a UX point of view to solve this by adding some kind of progress bar to the link itself.

Implementation

The first step would be to set up event handlers that listen for turbo:click (for links) and turbo:submit-start (for form buttons). These can add a class to indicate the loading "trickle" animation is active. We can then listen for the appropriate event that will inform us to "complete" the progress bar, likely turbo:before-render (or earlier?) for links, and turbo:submit-end for form buttons.

Visually, we could create a single colour gradient using our theme colour and scale it from 0% to 100% background size along the X axis. We can use a CSS animations and transitions for this. See Demo: Text Background Effects in CSS | CodyHouse for inspiration, especially the link in the middle paragraph: