From f6bcc49e807fdce5fb2dc86329345fdba32b857c Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Tue, 6 May 2025 10:35:25 +0200
Subject: [PATCH] Energyflow: fix NaN values (#21084)

---
 .../js/components/Helper/AnimatedNumber.vue   | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/assets/js/components/Helper/AnimatedNumber.vue b/assets/js/components/Helper/AnimatedNumber.vue
index 19501dcee..ca4e73df5 100644
--- a/assets/js/components/Helper/AnimatedNumber.vue
+++ b/assets/js/components/Helper/AnimatedNumber.vue
@@ -5,6 +5,7 @@
 <script lang="ts">
 import { CountUp } from "countup.js";
 import { defineComponent, type PropType } from "vue";
+import type { Timeout } from "@/types/evcc";
 const DURATION = 0.5;
 
 export default defineComponent({
@@ -17,11 +18,12 @@ export default defineComponent({
 	data() {
 		return {
 			instance: null as CountUp | null,
+			timeout: null as Timeout | null,
 		};
 	},
 	watch: {
 		to(value) {
-			this.instance?.update(value);
+			this.update(value);
 		},
 	},
 	mounted() {
@@ -40,11 +42,24 @@ export default defineComponent({
 	},
 	unmounted() {
 		this.instance = null;
+		if (this.timeout !== null) {
+			clearTimeout(this.timeout);
+		}
 	},
 	methods: {
 		forceUpdate() {
 			this.instance?.reset();
-			this.instance?.update(this.to);
+			this.update(this.to);
+		},
+		update(value: number) {
+			// debounced to avoid rendering issues
+			// @see https://github.com/inorganik/countUp.js/issues/330#issuecomment-2697595198
+			if (this.timeout !== null) {
+				clearTimeout(this.timeout);
+			}
+			this.timeout = setTimeout(() => {
+				this.instance?.update(value);
+			}, 100);
 		},
 	},
 });