Page Two

Open the browser console to see the debug information

Coding

The loading indicator you see in the top right corner on this page is the default loading indicator of the 👜 Bag of Tricks ✨. It is automatically activated if you install astro-vtbot as an astro integration.

The default icon that is displayed is the favicon of the current page. Of course, you can tweak the look & feel of the <LoadingIndicator/> component to your liking.

If you want to know what happens behind the scenes, here is a rough sketch of the code that is used to display a loading indicator if you use the reusable <LoadingIndicator/> component or the TypeScript pendant loading-indicator.ts:

1
document.addEventListener(TRANSITION_PAGE_LOAD, doInit); // optional: dynamically setup the indicator
2
document.addEventListener(TRANSITION_BEFORE_PREPARATION, doShow); // show the indicator
3
document.addEventListener(TRANSITION_BEFORE_SWAP, doHide); // hide the indicator