From 6cbd6becc6aea895bc6a776eef5a65cd7647a051 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 12 Feb 2024 13:59:53 -0700
Subject: [PATCH] Improve jpg loading

---
 .../camera/AutoUpdatingCameraImage.tsx        | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/web/src/components/camera/AutoUpdatingCameraImage.tsx b/web/src/components/camera/AutoUpdatingCameraImage.tsx
index 2bfe4ca1b..810ed82d1 100644
--- a/web/src/components/camera/AutoUpdatingCameraImage.tsx
+++ b/web/src/components/camera/AutoUpdatingCameraImage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import CameraImage from "./CameraImage";
 
 type AutoUpdatingCameraImageProps = {
@@ -20,6 +20,18 @@ export default function AutoUpdatingCameraImage({
 }: AutoUpdatingCameraImageProps) {
   const [key, setKey] = useState(Date.now());
   const [fps, setFps] = useState<string>("0");
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
+
+  useEffect(() => {
+    setKey(Date.now());
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        setTimeoutId(undefined);
+      }
+    };
+  }, [reloadInterval]);
 
   const handleLoad = useCallback(() => {
     const loadTime = Date.now() - key;
@@ -28,11 +40,13 @@ export default function AutoUpdatingCameraImage({
       setFps((1000 / Math.max(loadTime, reloadInterval)).toFixed(1));
     }
 
-    setTimeout(
-      () => {
-        setKey(Date.now());
-      },
-      loadTime > reloadInterval ? 1 : reloadInterval
+    setTimeoutId(
+      setTimeout(
+        () => {
+          setKey(Date.now());
+        },
+        loadTime > reloadInterval ? 1 : reloadInterval
+      )
     );
   }, [key, setFps]);