From b8739ba592d16c3a4af46b67a96eed6386ad785d Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 4 Apr 2024 09:54:38 -0600
Subject: [PATCH] Use optimistic state for metrics toggle

---
 web/src/pages/System.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/System.tsx b/web/src/pages/System.tsx
index 77dcba2aa..a0fd69b95 100644
--- a/web/src/pages/System.tsx
+++ b/web/src/pages/System.tsx
@@ -9,6 +9,7 @@ import StorageMetrics from "@/views/system/StorageMetrics";
 import { LuActivity, LuHardDrive } from "react-icons/lu";
 import { FaVideo } from "react-icons/fa";
 import Logo from "@/components/Logo";
+import useOptimisticState from "@/hooks/use-optimistic-state";
 
 const metrics = ["general", "storage", "cameras"] as const;
 type SystemMetric = (typeof metrics)[number];
@@ -17,6 +18,7 @@ function System() {
   // stats page
 
   const [page, setPage] = useState<SystemMetric>("general");
+  const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
   const [lastUpdated, setLastUpdated] = useState<number>(Date.now() / 1000);
 
   // stats collection
@@ -35,17 +37,17 @@ function System() {
           className="*:px-3 *:py-4 *:rounded-md"
           type="single"
           size="sm"
-          value={page}
+          value={pageToggle}
           onValueChange={(value: SystemMetric) => {
             if (value) {
-              setPage(value);
+              setPageToggle(value);
             }
           }} // don't allow the severity to be unselected
         >
           {Object.values(metrics).map((item) => (
             <ToggleGroupItem
               key={item}
-              className={`flex items-center justify-between gap-2 ${page == item ? "" : "*:text-gray-500"}`}
+              className={`flex items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-gray-500"}`}
               value={item}
               aria-label={`Select ${item}`}
             >