loading indicator

[martrapp]

This is about an improvement that gives visual feedback that Astro got the click!

There is a crude tech demo of what we could do at https://events-3bg.pages.dev/loading/one/ that fulfills the most basic requirements:

• as soon as user clicks a link or submits a form there is some form of visual feed back
• the loading indicator is removed from the screen right before view transition makes its screenshot of the old page.
• iconic look & feel that has a great recognition value across different websites
• unobtrusive and fits a variety of designs.
• easily styleable
• could show real progress of loading Not worth the effort
• works for mobile and desktop
• We haven't thought much about canceling and interrupting view transitions yet. Cancelation is now supported by the core. There may also be changes for long loading processes.
• ...

Astro view transitions feel a bit more clumsy than transitions without because you get no reaction until the animation kicks in, which is not before the target DOM is completely loaded. Without view transitions the browser can start rendering the page as soon as the bytes are streamed in.

First things that might come to mind for loading indicators are spinners, load progress bars, and skeleton pages.

• Spinners is simple: activate an animated gif/avif on click and remove it before the view transition. See https://events-3bg.pages.dev/loading/one/

• load progress bar is a bit more difficult if it should be meaningful: See https://events-3bg.pages.dev/docs/Practical/#i-want-to-use-a-loader-that-can-output-percentage-events-during-loading

  • Astro does not generate content-length headers as streamed headers have no idea of the final length
  • content-length is the non zipped/brotlied size and not the size on the wire
  • Hosting provider like Cloudflare and others usually remove the content-length header when they compress the response
  • Edited: Florian's example below shows that a fake loading experience is much easier to achieve and difficult to distinguish from reality.

• Skeleton pages allow the user to quickly deliver a sketch of the target page. This is typical approach when rendered client-side and loading fragments. For a static Astro site loading a skeleton might be as slow as loading the real thing. Here the Portal Demo might point in an interesting direction: The cached portal page can be shown immediately. It might even copy over some persisted areas from the original page & show some placeholders. Next.js does something similar with its loading.js support.

[florian-lefebvre]

Exploration: https://github.com/florian-lefebvre/astro-loading-indicator

[martrapp]

That's really impressive! It looks like the bar is showing real loading progress.
This is indeed good enough for all practical purposes. It looks good on a slow connection and doesn't seem to slow things down if the page is already in cache.
Great catch!

[martrapp]

As of 1.4.2 The Bag offers a loading indicator that lets the favicon pulse in the upper right corner.
It also offers a generic base for further indicators and invites users to suggest or contribute own indicators.