fix removal of loading indicators (#152)

.changeset/hot-steaks-rush.md

@@ -0,0 +1,5 @@
+---
+'astro-vtbot': patch
+---
+
+Fixes an issue where the loading indicator was not removed when the browser decided to download the target of a link.

components/loading-indicator.ts

@@ -25,8 +25,16 @@ const doInit = () => {
 export function initialize(onPageLoad?: () => void | Promise<void>, lowPrio = false) {
 	if (!(initializer && lowPrio)) initializer = onPageLoad;
 	document.addEventListener('astro:page-load', doInit);
-	document.addEventListener('astro:before-preparation', doShow);
-	document.addEventListener('astro:after-preparation', doHide);
+	document.addEventListener('astro:before-preparation', (e) => {
+		doShow();
+		if ('loader' in e) {
+			const originalLoader = e.loader as () => Promise<void>;
+			e.loader = async () => {
+				await originalLoader();
+				doHide();
+			};
+		}
+	});
 }
 
 type Options = {

test/fixture/src/pages/loading/one.astro

@@ -0,0 +1,23 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import LoadingIndicator from 'astro-vtbot/components/LoadingIndicator.astro';
+import BrakePad from 'astro-vtbot/components/BrakePad.astro';
+---
+
+<Layout title="Load1">
+	<LoadingIndicator slot="head" />
+	<BrakePad duration={500} slot="head" />
+	<h1>Loading One</h1>
+	<a href="/loading/two/" id="click">Click</a>
+	<a href="/x.zip" id="download">Download</a>
+</Layout>
+<script>
+	const obs = new MutationObserver((records) => {
+		records.forEach(
+			(record) =>
+				record.attributeName === 'class' &&
+				console.log('test:' + document.documentElement.getAttribute('class'))
+		);
+	});
+	obs.observe(document.documentElement, { attributes: true });
+</script>

test/fixture/src/pages/loading/two.astro

@@ -0,0 +1,10 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import LoadingIndicator from 'astro-vtbot/components/LoadingIndicator.astro';
+---
+
+<Layout title="Load2">
+	<LoadingIndicator slot="head" />
+	<h1>Loading Two</h1>
+	<a href="/loading/one/" id="click">Click</a>
+</Layout>

test/vt-bot.spec.ts

@@ -258,3 +258,23 @@ test.describe('ReplacementSwap', () => {
 		expect(await page.locator('head meta[name="persist"]').getAttribute('content')).toBe('5');
 	});
 });
+test.describe('Loading Indicator', () => {
+	test('inserts and removes loading class', async ({ page }) => {
+		const msgs: string[] = [];
+		page.on('console', (msg) => msg.text().startsWith('test:') && msgs.push(msg.text()));
+		await page.goto('/loading/one/');
+		await expect(page).toHaveTitle('Load1');
+		await page.locator('#click').click();
+		await expect(page).toHaveTitle('Load2');
+		expect(msgs.slice(0, 2).join('|')).toBe('test:loading|test:');
+	});
+	test('inserts and removes loading class even when errors occur', async ({ page }) => {
+		const msgs: string[] = [];
+		page.on('console', (msg) => msg.text().startsWith('test:') && msgs.push(msg.text()));
+		await page.goto('/loading/one/');
+		await expect(page).toHaveTitle('Load1');
+		await page.locator('#download').click();
+		await new Promise((resolve) => setTimeout(resolve, 1000));
+		expect(msgs.slice(0, 2).join('|')).toBe('test:loading|test:');
+	});
+});