@substrate-system/fouc

fouc

Flash of Unstyled Content

Install
Example
- noscript
API
- ESM
- Common JS
- pre-built JS
- fouc

Install

npm i -S @substrate-system/fouc

Example

Takes a callback, or returns a promise.

import { fouc } from '@substrate-system/fouc'

fouc(() => {
    document.body.style.opacity = '1'
})

// or returns a promise
await fouc()

noscript

Add this to your HTML so that it supports devices without Javascript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... -->
    <noscript>
        <style>
            body {
                opacity: 1;  /* We set this in JS b/c FOUC */
            }
        </style>
    </noscript>
    <!-- ... -->
  </head>

API

This exposes ESM and common JS via package.json exports field.

ESM

import { fouc } from '@substrate-system/fouc'

Common JS

require('@substrate-system/fouc')

pre-built JS

This package exposes minified JS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.

copy

cp ./node_modules/@substrate-system/fouc/dist/index.min.js ./public/fouc.min.js

HTML

<script type="module" src="./fouc.min.js"></script>

`fouc`

Return a promise if a callback is not passed in.

function fouc (cb?:()=>any):Promise<void>|void