fix(atomic): hide unhydrated results (#4900)

https://coveord.atlassian.net/browse/KIT-3775 Inspired by https://bbellmyers.github.io/2020/09/27/fouc-stencil.html. Not a definitive fix: When Lit migration is done for the atomic-result, we should validate for regression on that front, and also try to improve the behavior even so slightly. It might also be preferable to migrate all result components first, so that we can "cut" this behavior neatly. (would likely not happen because I _think_ we scan documentFragment from template element, so we should have all the element defined by then (tho maybe not because of race conditions, in which case https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements might be adapted for our needs)
coveo · Feb 4, 2025 · 5bb6b51 · 5bb6b51
1 parent 3ba383c
commit 5bb6b51
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 0 deletions.
diff --git a/...ic/src/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.pcss b/...ic/src/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.pcss
@@ -45,3 +45,7 @@
     }
   }
 }
+
+atomic-product:not(.hydrated) {
+  visibility: hidden;
+}
diff --git a/...nts/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.pcss b/...nts/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.pcss
@@ -18,3 +18,7 @@
   font-size: var(--atomic-text-2xl);
   font-weight: var(--atomic-font-bold);
 }
+
+atomic-product:not(.hydrated) {
+  visibility: hidden;
+}
diff --git a/...ght/result-lists/atomic-insight-folded-result-list/atomic-insight-folded-result-list.pcss b/...ght/result-lists/atomic-insight-folded-result-list/atomic-insight-folded-result-list.pcss
@@ -1,2 +1,5 @@
 @import '../../../common/item-list/styles/placeholders.pcss';
 @import '../styles/list-display.pcss';
+atomic-result:not(.hydrated) {
+  visibility: hidden;
+}
diff --git a/...omponents/insight/result-lists/atomic-insight-result-list/atomic-insight-result-list.pcss b/...omponents/insight/result-lists/atomic-insight-result-list/atomic-insight-result-list.pcss
@@ -1,2 +1,5 @@
 @import '../../../common/item-list/styles/placeholders.pcss';
 @import '../styles/list-display.pcss';
+atomic-result:not(.hydrated) {
+  visibility: hidden;
+}
diff --git a/...atomic/src/components/ipx/atomic-ipx-recs-list/atomic-recs-list/atomic-ipx-recs-list.pcss b/...atomic/src/components/ipx/atomic-ipx-recs-list/atomic-recs-list/atomic-ipx-recs-list.pcss
@@ -22,3 +22,7 @@
   font-size: var(--atomic-text-2xl);
   font-weight: var(--atomic-font-bold);
 }
+
+atomic-result:not(.hydrated) {
+  visibility: hidden;
+}
diff --git a/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.pcss b/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.pcss
@@ -22,3 +22,7 @@
   font-size: var(--atomic-text-2xl);
   font-weight: var(--atomic-font-bold);
 }
+
+atomic-result:not(.hydrated) {
+  visibility: hidden;
+}
diff --git a/...c/components/search/result-lists/atomic-folded-result-list/atomic-folded-result-list.pcss b/...c/components/search/result-lists/atomic-folded-result-list/atomic-folded-result-list.pcss
@@ -1,2 +1,5 @@
 @import '../../../common/item-list/styles/placeholders.pcss';
 @import '../../../common/item-list/styles/list-display.pcss';
+atomic-result:not(.hydrated) {
+  visibility: hidden;
+}
diff --git a/...ages/atomic/src/components/search/result-lists/atomic-result-list/atomic-result-list.pcss b/...ages/atomic/src/components/search/result-lists/atomic-result-list/atomic-result-list.pcss
@@ -2,3 +2,6 @@
 @import '../../../common/item-list/styles/table-display.pcss';
 @import '../../../common/item-list/styles/list-display.pcss';
 @import '../../../common/item-list/styles/grid-display.pcss';
+atomic-result:not(.hydrated) {
+  visibility: hidden;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,3 +45,7 @@ @@
         }
       }
     }
+    atomic-product:not(.hydrated) {
+      visibility: hidden;
+    }