Prevent Tauri App from Displaying Un-styled Markup in Vite

Question

When my Tauri app loads, it displays the contents of the index.html file for a few seconds before it applies styles from the applicable css files. It's kind of cheesy, especially because there are items that should initially be hidden. I can add styles directly to the markup to hide things at first, and then remove them as needed in the load event handler, but I wonder if there's a better way.

Answer 1

Vite has a documentation section on how to avoid FOUC:

Vite automatically extracts the CSS used by modules in an async chunk and generates a separate file for it. The CSS file is automatically loaded via a <link> tag when the associated async chunk is loaded, and the async chunk is guaranteed to only be evaluated after the CSS is loaded to avoid FOUC.

If you'd rather have all the CSS extracted into a single file, you can disable CSS code splitting by setting build.cssCodeSplit to false.

Alternatively you can force Vite to insert a link in the head:

export default defineConfig({
    // ...your config
    build: {
        rollupOptions: {
            input: {
                theme: "./assets/your.css" // <-- here
            },
        }
    },
});

Also this happens only in development run, if you run production FOUC should not be the case by design.