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');
+ });
 });