From 70193eb56850e9353e7d8f17172ebff3bb6d5983 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Tue, 5 Nov 2024 21:50:54 -0500
Subject: [PATCH] =?UTF-8?q?perf(dropdown):=20=E2=9A=A1=EF=B8=8F=20use=20co?=
 =?UTF-8?q?ntent-visibility=20for=20icons=20and=20dropdown=20menus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This will reduce the initial render cost of the menus, and also prevent premature download
for the icons.
---
 resources/skins.citizen.styles/components/Dropdown.less | 6 +++++-
 resources/skins.citizen.styles/components/Menu.less     | 5 +----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/resources/skins.citizen.styles/components/Dropdown.less b/resources/skins.citizen.styles/components/Dropdown.less
index 2d0e73d99..c29f5a08b 100644
--- a/resources/skins.citizen.styles/components/Dropdown.less
+++ b/resources/skins.citizen.styles/components/Dropdown.less
@@ -1,12 +1,15 @@
 .citizen-dropdown {
 	.citizen-menu__card {
 		z-index: @z-index-dropdown;
+		content-visibility: hidden;
 		max-width: 80vw;
 		transition-timing-function: var( --transition-timing-function-ease-in );
 		transition-duration: var( --transition-duration-base );
-		transition-property: transform;
+		transition-property: transform, content-visibility;
+		transition-behavior: allow-discrete;
 
 		> * {
+			opacity: 0;
 			transition-timing-function: var( --transition-timing-function-ease-in );
 			transition-duration: var( --transition-duration-base );
 			transition-property: opacity;
@@ -58,6 +61,7 @@
 	&-details {
 		&[ open ] {
 			+ .citizen-menu__card {
+				content-visibility: visible;
 				transition-timing-function: var( --transition-timing-function-ease-out );
 				transition-duration: var( --transition-duration-medium );
 				transform: none;
diff --git a/resources/skins.citizen.styles/components/Menu.less b/resources/skins.citizen.styles/components/Menu.less
index 0d1b9123e..c2493867f 100644
--- a/resources/skins.citizen.styles/components/Menu.less
+++ b/resources/skins.citizen.styles/components/Menu.less
@@ -14,10 +14,6 @@
 		box-shadow: var( --box-shadow-drop-xx-large );
 		transform: scale( 0 );
 		contain: content;
-
-		> * {
-			opacity: 0;
-		}
 	}
 
 	&__heading {
@@ -80,6 +76,7 @@
 	height: var( --size-icon );
 	min-height: var( --size-icon );
 	contain: strict;
+	content-visibility: auto;
 
 	&::before {
 		display: block;