Config UI: reduce layout shift (#28413)

Author: naltatis

assets/js/components/Config/DeviceCard.vue

@@ -26,21 +26,25 @@
 				@edit="$emit('edit')"
 			/>
 		</div>
-		<div v-if="$slots.tags">
+		<div v-if="$slots.tags" ref="tagsContainer" :style="tagsStyle">
 			<hr class="my-3 divide" />
-			<slot name="tags" />
+			<div ref="tagsContent">
+				<slot name="tags" />
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
 import DeviceCardEditIcon from "./DeviceCardEditIcon.vue";
+import settings from "../../settings";
 
 export default {
 	name: "DeviceCard",
 	components: { DeviceCardEditIcon },
 	props: {
 		name: String,
+		id: String,
 		title: String,
 		editable: Boolean,
 		error: Boolean,
@@ -50,6 +54,49 @@ export default {
 		badge: Boolean,
 	},
 	emits: ["edit"],
+	data() {
+		return {
+			tagsMinHeight: null,
+			resizeObserver: null,
+		};
+	},
+	computed: {
+		tagsStyle() {
+			return this.tagsMinHeight ? { minHeight: `${this.tagsMinHeight}px` } : undefined;
+		},
+	},
+	mounted() {
+		if (!this.id) return;
+		const cached = settings.cardHeights[this.id];
+		if (cached > 0) {
+			this.tagsMinHeight = cached;
+		}
+		// Cache tag heights to reduce layout shift. Hold cached min-height
+		// until async data fills the space, then save and release.
+		this.$nextTick(() => {
+			const el = this.$refs.tagsContainer;
+			const content = this.$refs.tagsContent;
+			if (!el || !content) return;
+			const initialHeight = content.offsetHeight;
+			this.resizeObserver = new ResizeObserver(() => {
+				if (content.offsetHeight <= initialHeight) return;
+				const prev = el.style.minHeight;
+				el.style.minHeight = "";
+				const naturalHeight = Math.round(el.getBoundingClientRect().height);
+				el.style.minHeight = prev;
+				if (!this.tagsMinHeight || naturalHeight >= this.tagsMinHeight) {
+					settings.cardHeights[this.id] = naturalHeight;
+					this.tagsMinHeight = null;
+					this.resizeObserver?.disconnect();
+					this.resizeObserver = null;
+				}
+			});
+			this.resizeObserver.observe(content);
+		});
+	},
+	unmounted() {
+		this.resizeObserver?.disconnect();
+	},
 };
 </script>
 

assets/js/components/Config/MeterCard.vue

@@ -1,5 +1,6 @@
 <template>
 	<DeviceCard
+		:id="`meter_${meterType}_${meter.name}`"
 		:title="cardTitle"
 		:name="meter.name"
 		:editable="!!meter.id"

assets/js/components/Config/TariffCard.vue

@@ -1,5 +1,6 @@
 <template>
 	<DeviceCard
+		:id="`tariff_${tariffType}_${tariff.name}`"
 		:title="cardTitle"
 		:name="tariff.name"
 		:editable="!!tariff.id"

assets/js/settings.ts

@@ -23,6 +23,7 @@ const LAST_BATTERY_SMART_COST_LIMIT = "last_battery_smart_cost_limit";
 const LAST_TARGET_TIME = "last_target_time";
 const LAST_SOC_GOAL = "last_soc_goal";
 const LAST_ENERGY_GOAL = "last_energy_goal";
+const CONFIG_CARD_HEIGHTS = "config_card_heights";
 
 function read(key: string) {
   return window.localStorage[key];
@@ -124,6 +125,7 @@ export interface Settings {
   lastTargetTime: string | null;
   lastSocGoal: number | undefined;
   lastEnergyGoal: number | undefined;
+  cardHeights: Record<string, number>;
 }
 
 const settings: Settings = reactive({
@@ -148,6 +150,7 @@ const settings: Settings = reactive({
   lastTargetTime: read(LAST_TARGET_TIME),
   lastSocGoal: readNumber(LAST_SOC_GOAL),
   lastEnergyGoal: readNumber(LAST_ENERGY_GOAL),
+  cardHeights: readJSON(CONFIG_CARD_HEIGHTS),
 });
 
 watch(() => settings.locale, save(SETTINGS_LOCALE));
@@ -171,6 +174,7 @@ watch(() => settings.lastBatterySmartCostLimit, saveNumber(LAST_BATTERY_SMART_CO
 watch(() => settings.lastTargetTime, save(LAST_TARGET_TIME));
 watch(() => settings.lastSocGoal, saveNumber(LAST_SOC_GOAL));
 watch(() => settings.lastEnergyGoal, saveNumber(LAST_ENERGY_GOAL));
+watch(() => settings.cardHeights, saveJSON(CONFIG_CARD_HEIGHTS), { deep: true });
 
 export default settings;
 

assets/js/views/Config.vue

@@ -26,6 +26,7 @@
 				<div class="p-0 config-list">
 					<DeviceCard
 						v-for="loadpoint in loadpoints"
+						:id="`loadpoint_${loadpoint.name}`"
 						:key="loadpoint.name"
 						:title="loadpoint.title"
 						:name="loadpoint.name"
@@ -57,6 +58,7 @@
 				<div class="p-0 config-list">
 					<DeviceCard
 						v-for="vehicle in vehicles"
+						:id="`vehicle_${vehicle.name}`"
 						:key="vehicle.name"
 						:title="vehicle.config?.title || vehicle.name"
 						:name="vehicle.name"