From f41901baf62cd3e6f05fc8fc669944f967b63253 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Tue, 5 Mar 2024 09:19:54 +0100
Subject: [PATCH] Planner: faster loading (#12673)

---
 assets/js/components/ChargingPlanSettings.vue | 6 +++++-
 assets/js/components/TariffChart.vue          | 9 ++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/assets/js/components/ChargingPlanSettings.vue b/assets/js/components/ChargingPlanSettings.vue
index c4bd792b1..bcc9d623d 100644
--- a/assets/js/components/ChargingPlanSettings.vue
+++ b/assets/js/components/ChargingPlanSettings.vue
@@ -23,7 +23,7 @@
 				{{ $t(`main.targetCharge.${isPreview ? "preview" : "currentPlan"}`) }}
 			</div>
 		</h5>
-		<ChargingPlanPreview v-if="chargingPlanPreviewProps" v-bind="chargingPlanPreviewProps" />
+		<ChargingPlanPreview v-bind="chargingPlanPreviewProps" />
 	</div>
 </template>
 
@@ -136,6 +136,10 @@ export default {
 			}
 		},
 		fetchPlanDebounced: async function (preview) {
+			if (!this.debounceTimer) {
+				await this.fetchPlan(preview);
+				return;
+			}
 			clearTimeout(this.debounceTimer);
 			this.debounceTimer = setTimeout(async () => await this.fetchPlan(preview), 1000);
 		},
diff --git a/assets/js/components/TariffChart.vue b/assets/js/components/TariffChart.vue
index 3d3040564..c057117a7 100644
--- a/assets/js/components/TariffChart.vue
+++ b/assets/js/components/TariffChart.vue
@@ -90,9 +90,9 @@ export default {
 		priceStyle(price) {
 			const value = price === undefined ? this.avgPrice : price;
 			const height =
-				value !== undefined
+				value !== undefined && !isNaN(value)
 					? `${10 + (90 / this.priceInfo.range) * (value - this.priceInfo.min)}%`
-					: "100%";
+					: "75%";
 			return { height };
 		},
 	},
@@ -116,7 +116,9 @@ export default {
 	flex-direction: column;
 	position: relative;
 	opacity: 1;
-	transition: opacity var(--evcc-transition-fast) linear;
+	transition-property: opacity, background, color;
+	transition-duration: var(--evcc-transition-fast);
+	transition-timing-function: ease-in;
 }
 @media (max-width: 991px) {
 	.chart {
@@ -148,6 +150,7 @@ export default {
 	display: flex;
 	justify-content: center;
 	color: var(--bs-white);
+	transition: height var(--evcc-transition-fast) ease-in;
 }
 .slot-label {
 	color: var(--bs-gray-light);