Feature request: Offer a way for reducing FOUCE (preventing elements & icons from flashing) #2271
Description
Please offer a way for reducing FOUCE and preventing elements & icons from flashing.
Check this first: Reducing FOUCE (Flash of Undefined Custom Elements)
https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/
Examples: This is how frameworks like WebAwesome and Alpine solve this problem =>
https://webawesome.com/docs/utilities/fouce
- The FOUCE style utility takes care of hiding custom elements until both they and their contents have been registered.
<html class="wa-cloak">
https://alpinejs.dev/directives/cloak
x-cloakhides the element it's attached to until Alpine is fully loaded on the page.- Add the following CSS to the page =>
[x-cloak] { display: none !important; }
Suggestion: Solve by adding ix-cloak class to the HTML node. The ix-cloak class should first have 'display: none' and will be reset after IX is fully initialized (after appload {namespace: 'siemens-ix'} is fired):
<html class="ix-cloak">
Please also mention that the event appload {namespace: 'siemens-ix'} is fired when IX is fully initialized because I couldn't find any info about this in the docs.