Post

I updated my article on reducing #WebComponent FOUC to include details on how to choose an appropriate timeout. #html #css #javascript dev.to/stuffbreaker...

dev.toReducing FOUC with Web ComponentsLearn practical techniques for reducing the flash of unstyled content (FOUC) as your web components/custom elements are defined to improve your users' experience

Lorenz Kahl

@truckturner.bsky.social

15 Feb

I really like the CSS only approach! Great idea and thanks for sharing 🙏 I think this is really useful for WC based design system libraries, where you normally are in full control of your site & content. I wonder how this would impact the use of multi page view transitions 🤔

Burton Smith

@stuffbreaker.bsky.social

15 Feb

That's a good question. As long as the timeout is short it shouldn't affect it, but I'll have to play with it.

Bag of Tricks for View Transitions

@vtbag.dev

If you want, you can delay the start of cross-document view transitions by blocking the renderer until the custom elements are defined. Then the last frame you see is the previous page. After the renderer resumes, the next frame shows the loading page with defined custom elements.

15/2/26, 9:57 pm1 repost1 like

Bramus

@bram.us

16 Feb

I believe github.com/w3c/csswg-dr... could be of use here. I added the Web Components use-case as a comment just now. Feel free to chime in on the issue :)

github.com[css-view-transitions-2] Extend `waitUntil` so that it can delay the start of the View Transition (animating phase) · Issue #13013 · w3c/csswg-draftsIn #9901 we resolved on adding ViewTransition.waitUntil() which delays the view transition finish until the given promise is settled. In WebKit/standards-positions#564 @nt1m brought up the followin...

Martin Trapp

@martr.app

16 Feb

Oh, neat. Waiting for images to render was my first thought. Getting more precise control over when the ::view-transition-new pseudo is captured would be awesome!