diff options
6 files changed, 43 insertions, 1 deletions
diff --git a/.changeset/cool-deers-dream.md b/.changeset/cool-deers-dream.md new file mode 100644 index 000000000..f4b462df4 --- /dev/null +++ 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 index 8b22671b9..ad5a9b0f6 100644 --- 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 new file mode 100644 index 000000000..7643138f8 --- /dev/null +++ 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 index 38bc302e9..e4dc54015 100644 --- 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 index b3cadcad7..ec5b699d8 100644 --- 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 index 5dbd845f4..f73b26675 100644 --- 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'); + }); }); |