Flash of unstyled content (FOUC) with Sapper

[ajbouh]

Seems like there's something in the Material UI libraries that may be forcing a layout or style recalculation before all CSS has been parsed.

Is this something other people are seeing?

I see this on macOS in Chrome Canary and the latest Firefox. I do not see it in Desktop Safari.

This is definitely happening in dev mode with sapper and may be due to my own webpack configuration failing to include appropriate stylesheets in the SSR version of the page.

But some of my investigations using the chrome profiling tools also implicate detectEdgePseudoVarBug(...) in https://github.com/material-components/material-components-web/blob/master/packages/mdc-ripple/util.ts (although probably not the exact version that's on the master branch in that repo).

I've tried disabling the ripple effect on components but I wasn't able to do this completely.

[jobelenus]

I am also seeing this, but the Nav and Footer are not flashing. Just the main content, which is just Paper -> Drawer -> List/Table. Everything inside Paper is flashing, nothing outside of it. I'm working on this every day, happy to work through potential issues.

[hperrin]

I do see this too.

[hperrin]

@jobelenus Were you able to figure anything out?

[jobelenus]

No, I don't think so

On Fri, Dec 13, 2019 at 5:38 PM Hunter Perrin notifications@github.com wrote:

@jobelenus https://github.com/jobelenus Were you able to figure anything out?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/hperrin/svelte-material-ui/issues/66?email_source=notifications&email_token=AAAQ7JJAYU6NR7ESHPOG4D3QYQFGTA5CNFSM4JNAIJ42YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEG3OUBI#issuecomment-565635589, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAQ7JI4EFHHFBYXB3QTYOTQYQFGTANCNFSM4JNAIJ4Q .

[Vehmloewff]

This happens because the material scss styles that style the components are included in the js.

Sapper first sends down the small static html and css, and when the larger js files (that have all of @material's compiled sass) load, the html is hydrated.

That is why the non-material elements to not flash.

You can do a workaround like this:

// src/routes/_layout.svelte
<script>
    import { onMount } from 'svelte';

    let ready = false;

    onMount(() => (ready = true));
</script>

{#if ready}
    <slot />
{/if}

It will prevent the UI from flashing, but then you have taken away the benefit of Sapper's SSR feature.

[Jan-Kuta]

Hello,

is some progress on this issue? Or does exist some workaround which doesn't kill Sapper's SSR feature?

According to this issue https://github.com/hperrin/svelte-material-ui/issues/29 some solution might exist (@hperrin maybe knows).

Thank you very much for any advice, Honza

[gmanfredi]

I'm assuming there's been no progress on this? Any news, ideas? I am also using svelte-material-ui library with Sapper and getting the FOUC and would love to not have to kill SSR.

[hperrin]

I have finally fixed this!!! It took literally all day today!

[hperrin]

There are new instructions here, which will let you use SMUI in Sapper without a FOUC: https://github.com/hperrin/svelte-material-ui#integration-for-sapper

[hperrin]

https://sveltematerialui.com/ now no longer has a FOUC when loaded! :D

[JohanHeyvaert]

This problem seems to have reappeared? I'm using SvelteKit and smui 7.0.0-beta.0. It even occurs on the demo site (https://sveltematerialui.com).

The workaround with onMount() and {#if ready} works though.

EDIT: oops, my bad I think: I had my developer tools open, with caching disabled. Probably it's normal that you then have a FOUC?