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

Reduce FOUC of Web-Components #365

Closed
1 task done
AndyOGo opened this issue Mar 27, 2018 · 5 comments
Closed
1 task done

Reduce FOUC of Web-Components #365

AndyOGo opened this issue Mar 27, 2018 · 5 comments
Assignees
@davidknezic @LucaMele @sventschui @AndyOGo @TheDadi @jojackpot @01231 @kenaxa
Labels
Enhancement High-prio
Milestone
Custom Elements r...

Comments

@AndyOGo
Copy link

AndyOGo commented Mar 27, 2018

Are you reporting a bug or a feature?

  • Feature

Expected Behavior

Each Web-Component should display it's content upon Connection and not any time sooner.

Actual Behavior

Each Web-Components renders it's children without any styles, once the custom element gets asynchronously connected it re-renders again, flattening it's local and light DOM and applies it's custom CSS styling. This process is visible as an ugly FOUC (Flash of unstyled content).

Steps to Reproduce the Problem

  1. just go to https://axa-ch.github.io/patterns-library/organisms.html

web-components-fouc

Specifications

Any browser
@AndyOGo
Copy link
Author

AndyOGo commented Mar 27, 2018

Related article:
https://www.stevesouders.com/blog/2013/11/26/performance-and-custom-elements/

@AndyOGo AndyOGo mentioned this issue Mar 27, 2018
Closed
1 task
@AndyOGo
Copy link
Author

AndyOGo commented Jun 19, 2018

IMHO the best approach would be to disable visibility until the custom element is connected.

@AndyOGo AndyOGo mentioned this issue Jun 19, 2018
Closed
12 tasks
@AndyOGo
Copy link
Author

AndyOGo commented Jun 20, 2018 •
edited
Loading

Dealing with FOUC of custom elements is really pure pain 😭
I mean we can fix it for the Plib, but each consumer of the patterns library has to fix every single custom element by themselves, we can't do it reliably in advance...

Here are all approaches I came up with (and all of them suck):

  • inline <axa-foo style="visibility: hidden;"> - most bullet proof IMHO
  • global <axa-foo class="is-custom-element-disconnected"> - CSS must be loaded before any custom element (ideally in the <head>)
  • CSS tag wildcard selector axa-* { visibility: hidden; } - nice idea, but such a selector does not exist and again must be loaded before any custom element
    Note: we could fake this and maintain a curated list of AXA custom element selectors, like: 
    axa-icon, axa-dropdown, axa-button, ... {
  visibility: hidden;
}
    But that is just stupid...
  • the global HTML hidden attributes is the equivalent of CSS display not visibility - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
  • add a PostHTML plugin which adds the inline style - needs an additional build step for our users...

Note: This whole issue and many others arise from the custom element's asynchronous nature. They start in disconnected state, but display their unstyled children (the FOUC), then in the best case they become connected as soon as their JS definition is registered and their styles display (the FOUC). And to make this even more complicated, any nested parent/child custom element will trigger those state changes multiple times, which leads us to the FOUC chainsaw massacre 😱

Note 2: The main issue is server generated code. Client side integrations like withReact can be extended to automatically add inline style="visibility: hidden;" for all custom elements.

@AndyOGo AndyOGo mentioned this issue Oct 8, 2018
Closed
2 tasks
@AndyOGo
Copy link
Author

AndyOGo commented Oct 11, 2018

@jojackpot and @kenaxa suggest to mitigate this with skeleton views - including an SVG-animation loaded inline with the HTML markup (before CSS and JS).

@AndyOGo AndyOGo added this to the Custom Elements reliable milestone Oct 15, 2018
@AndyOGo AndyOGo mentioned this issue Mar 4, 2019
Closed
2 tasks
@LucaMele
Copy link
Contributor

closing as new plib version is live. If issue is with v2 still relevant, please re-open

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@davidknezic davidknezic

@LucaMele LucaMele

@sventschui sventschui

@AndyOGo AndyOGo

@TheDadi TheDadi

@jojackpot jojackpot

@01231 01231

@kenaxa kenaxa

Labels
Enhancement High-prio
Projects
None yet
Milestone
Custom Elements reliable
Development

Successfully merging a pull request may close this issue.

Bugfix/improve fouc axa-ch-webhub-cloud/pattern-library
8 participants
@davidknezic @LucaMele @sventschui @AndyOGo @TheDadi @jojackpot @01231 @kenaxa