feat(styles): set initial component visibility to hidden to prevent f…

…lickering (#3814) Co-authored-by: Philipp Gfeller <[email protected]>
swisspost · Nov 11, 2024 · e1207f3 · e1207f3
1 parent 6b02f8c
commit e1207f3
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
@@ -113,6 +113,10 @@ By setting a component's name as a `component` property in your stories' metadat
 All components should have automated tests.
 These tests are available in the `cypress/e2e` folder.
 
+### Set inital component Visibility to hidden
+
+To prevent flickering while components load, add each new component to the list in `packages/styles/src/utilities/_not-defined.scss`, which applies `visibility: hidden` to all listed components until they are registered by the browser (when the hydrated attribute actually starts to take effect).
+
 ## Stencil
 
 ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

diff --git a/packages/styles/src/utilities/_index.scss b/packages/styles/src/utilities/_index.scss
@@ -6,6 +6,7 @@
 
 @use './mixins' as *;
 @use './variables' as *;
+@use './not-defined' as *;
 
 @use './temp/legacy';
 

diff --git a/packages/styles/src/utilities/_not-defined.scss b/packages/styles/src/utilities/_not-defined.scss
@@ -0,0 +1,25 @@
+/* 
+  Initial visibility of the components is set to hidden to prevent 'flickering' effect due to stencil js/scss delay.
+*/
+
+:where(
+    post-list,
+    post-list-item,
+    post-accordion,
+    post-accordion-item,
+    post-alert,
+    post-card-control,
+    post-collapsible,
+    post-icon,
+    post-logo,
+    post-popover,
+    post-popovercontainer,
+    post-rating,
+    post-tab-header,
+    post-tab-panel,
+    post-tabs,
+    post-tag,
+    post-tooltip
+  ):not(:defined) {
+  visibility: hidden;
+}