administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 05:35:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Use optimistic state for metrics toggle

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-04 09:54:38 -06:00
parent 02264de5ad
commit b8739ba592
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/pages/System.tsx
View File

@ -9,6 +9,7 @@ import StorageMetrics from "@/views/system/StorageMetrics";
import { LuActivity, LuHardDrive } from "react-icons/lu"; import { LuActivity, LuHardDrive } from "react-icons/lu";
import { FaVideo } from "react-icons/fa"; import { FaVideo } from "react-icons/fa";
import Logo from "@/components/Logo"; import Logo from "@/components/Logo";
import useOptimisticState from "@/hooks/use-optimistic-state";
const metrics = ["general", "storage", "cameras"] as const; const metrics = ["general", "storage", "cameras"] as const;
type SystemMetric = (typeof metrics)[number]; type SystemMetric = (typeof metrics)[number];
@ -17,6 +18,7 @@ function System() {
// stats page // stats page
const [page, setPage] = useState<SystemMetric>("general"); const [page, setPage] = useState<SystemMetric>("general");
const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
const [lastUpdated, setLastUpdated] = useState<number>(Date.now() / 1000); const [lastUpdated, setLastUpdated] = useState<number>(Date.now() / 1000);
// stats collection // stats collection
@ -35,17 +37,17 @@ function System() {
className="*:px-3 *:py-4 *:rounded-md" className="*:px-3 *:py-4 *:rounded-md"
type="single" type="single"
size="sm" size="sm"
value={page} value={pageToggle}
onValueChange={(value: SystemMetric) => { onValueChange={(value: SystemMetric) => {
if (value) { if (value) {
setPage(value); setPageToggle(value);
} }
}} // don't allow the severity to be unselected }} // don't allow the severity to be unselected
> >
{Object.values(metrics).map((item) => ( {Object.values(metrics).map((item) => (
<ToggleGroupItem <ToggleGroupItem
key={item} 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} value={item}
aria-label={`Select ${item}`} aria-label={`Select ${item}`}
> >