From 9e3b0e107a503f4095501e64279a88d27c51de3a Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Sun, 28 Jul 2024 13:43:15 +0200
Subject: [PATCH] fix removal of loading indicators (#152)

---
 .changeset/hot-steaks-rush.md            |  5 +++++
 components/loading-indicator.ts          | 12 ++++++++++--
 test/fixture/public/x.zip                |  0
 test/fixture/src/pages/loading/one.astro | 23 +++++++++++++++++++++++
 test/fixture/src/pages/loading/two.astro | 10 ++++++++++
 test/vt-bot.spec.ts                      | 20 ++++++++++++++++++++
 6 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/hot-steaks-rush.md
 create mode 100644 test/fixture/public/x.zip
 create mode 100644 test/fixture/src/pages/loading/one.astro
 create mode 100644 test/fixture/src/pages/loading/two.astro

diff --git a/.changeset/hot-steaks-rush.md b/.changeset/hot-steaks-rush.md
new file mode 100644
index 0000000..f4d86c5
--- /dev/null
+++ b/.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.
diff --git a/components/loading-indicator.ts b/components/loading-indicator.ts
index 3a5132d..6a24748 100644
--- a/components/loading-indicator.ts
+++ b/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 = {
diff --git a/test/fixture/public/x.zip b/test/fixture/public/x.zip
new file mode 100644
index 0000000..e69de29
diff --git a/test/fixture/src/pages/loading/one.astro b/test/fixture/src/pages/loading/one.astro
new file mode 100644
index 0000000..ea04a74
--- /dev/null
+++ b/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>
diff --git a/test/fixture/src/pages/loading/two.astro b/test/fixture/src/pages/loading/two.astro
new file mode 100644
index 0000000..84e42ef
--- /dev/null
+++ b/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>
diff --git a/test/vt-bot.spec.ts b/test/vt-bot.spec.ts
index a933d11..4e4520e 100644
--- a/test/vt-bot.spec.ts
+++ b/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:');
+	});
+});