Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(dev): avoid FOUC when swapping out link tag (fix #7973) #8495

Merged
merged 3 commits into from Jun 9, 2022
Merged

fix(dev): avoid FOUC when swapping out link tag (fix #7973) #8495

merged 3 commits into from Jun 9, 2022

Commits on Jun 9, 2022

  1. fix(dev): fix FOUC when swapping out link tag 

    Assuming we have a CSS file at the following path...

```
/resources/css/app.css
```

When adding a link tag to the DOM manually (i.e. via Server Side Rendering)...

```html
<link rel="stylesheet" href="{DEV_SERVER_URL}/resources/css/app.css">
```

Vite will now watch this file and hot reload changes in the browser for this
asset. When we update `app.css` Vite will update the link tag's `href`
attribute like so...

```diff
- <link rel="stylesheet" href="{DEV_SERVER_URL}/resources/css/app.css?">
+ <link rel="stylesheet" href="{DEV_SERVER_URL}/resources/css/app.css?t={TIMESTAMP}">
```

This is great, but for a split moment there is a flash of unstyled content as the asset has not loaded yet. The browser unloads the styles from the original stylesheet and waits until the new stylesheet has loaded and been parsed before it will show the new stylings.

This PR addresses this problem. Now the process is as follows..

First the client adds a second (cloned) link tag to the DOM, leaving the original in place and still loaded by the browser...

```diff
<link rel="stylesheet" href="{DEV_SERVER_URL}/resources/css/app.css?">
+ <link rel="stylesheet" href="{DEV_SERVER_URL}/resources/css/app.css?t={TIMESTAMP}">
```

Once the new stylesheet has loaded, the browser will remove the original stylesheet from the DOM, leaving the new _loaded_ stylesheet in the DOM.

```diff
- <link rel="stylesheet" href="{DEV_SERVER_URL}/resources/css/app.css?">
<link rel="stylesheet" href="{DEV_SERVER_URL}/resources/css/app.css?t={TIMESTAMP}">
```

This process then continues for future updates to the CSS file.

I have no idea where to start adding a unit test for this. I'm a dumb back-end developer. Send help!

Edit: i've added a test. Not sure if it is any good though!
    @timacdonald
    timacdonald committed Jun 9, 2022
    Copy the full SHA
    96f07a4 View commit details
    Browse the repository at this point in the history

  2. Updates are now async. 

    Co-authored-by: 翠 / green <green@sapphi.red>
    @timacdonald @sapphi-red
    timacdonald and sapphi-red committed Jun 9, 2022
    Copy the full SHA
    8c81350 View commit details
    Browse the repository at this point in the history

  3. chore: remove old el on error

    @patak-dev
    patak-dev committed Jun 9, 2022
    Copy the full SHA
    76af8ca View commit details
    Browse the repository at this point in the history