Prevent FOUC with production links in ViewTransitions (#7756)

* Prevent FOUC with production links in ViewTransitions * Adding changeset * Move up so it works with fallback too
withastro · Jul 21, 2023 · 274e675 · 274e675
1 parent f79ab0b
commit 274e675
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 1 deletion.
diff --git a/.changeset/cool-deers-dream.md b/.changeset/cool-deers-dream.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes case where there is FOUC caused by stylesheets not loaded
diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
@@ -47,6 +47,16 @@ const { fallback = 'animate' } = Astro.props as Props;
 		doc.documentElement.dataset.astroTransition = dir;
 		const swap = () => document.documentElement.replaceWith(doc.documentElement);
 
+		// Wait on links to finish, to prevent FOUC
+		const links = Array.from(doc.querySelectorAll('head link[rel=stylesheet]')).map(link => new Promise(resolve => {
+		const c = link.cloneNode();
+			['load', 'error'].forEach(evName => c.addEventListener(evName, resolve));
+			document.head.append(c);
+		}));
+		if(links.length) {
+			await Promise.all(links);
+		}
+
 		if (fallback === 'animate') {
 			let isAnimating = false;
 			addEventListener('animationstart', () => (isAnimating = true), { once: true });

diff --git a/packages/astro/e2e/fixtures/view-transitions/public/two.css b/packages/astro/e2e/fixtures/view-transitions/public/two.css
@@ -0,0 +1,3 @@
+#two {
+	font-size: 24px;
+}
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro b/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro
@@ -1,9 +1,16 @@
 ---
 import { ViewTransitions } from 'astro:transitions';
+
+interface Props {
+	link?: string;
+}
+
+const { link } = Astro.props as Props;
 ---
 <html>
 	<head>
 		<title>Testing</title>
+		{link ? <link rel="stylesheet" href={link} > : ''}
 		<ViewTransitions />
 	</head>
 	<body>

diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/two.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from '../components/Layout.astro';
 ---
-<Layout>
+<Layout link="/two.css">
 	<p id="two">Page 2</p>
 </Layout>
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
@@ -126,4 +126,21 @@ test.describe('View Transitions', () => {
 		p = page.locator('#one');
 		await expect(p, 'should have content').toHaveText('Page 1');
 	});
+
+	test('Stylesheets in the head are waited on', async ({ page, astro }) => {
+		page.addListener('console', data => {
+			console.log(data)
+		})
+
+		// Go to page 1
+		await page.goto(astro.resolveUrl('/one'));
+		let p = page.locator('#one');
+		await expect(p, 'should have content').toHaveText('Page 1');
+
+		// Go to page 2
+		await page.click('#click-two');
+		p = page.locator('#two');
+		await expect(p, 'should have content').toHaveText('Page 2');
+		await expect(p, 'imported CSS updated').toHaveCSS('font-size', '24px');
+	});
 });