From e1207f3a6038b11275a1dc651723c263d18c71c1 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com>
Date: Mon, 11 Nov 2024 12:33:12 +0200
Subject: [PATCH] feat(styles): set initial component visibility to hidden to
 prevent flickering (#3814)

Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
---
 packages/components/CONTRIBUTING.md           |  4 +++
 packages/styles/src/utilities/_index.scss     |  1 +
 .../styles/src/utilities/_not-defined.scss    | 25 +++++++++++++++++++
 3 files changed, 30 insertions(+)
 create mode 100644 packages/styles/src/utilities/_not-defined.scss

diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index 2355ec2939..2975071b22 100644
--- 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
index 54e154f001..7e4688b794 100644
--- 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
new file mode 100644
index 0000000000..fa9113df7e
--- /dev/null
+++ 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;
+}