From 16c88fa8acc9794bcb2cb42a63db2283eae68102 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 30 Sep 2025 17:53:48 -0500
Subject: [PATCH] Camera group url fixes (#20295)

* Fix group url param where a camera group was not always loaded

Need to use the loading state from the usePersistence hook because values are loaded from indexed db asynchronously

* ensure group icon changes when using url param

* clean up
---
 web/src/components/filter/CameraGroupSelector.tsx | 2 +-
 web/src/hooks/use-overlay-state.tsx               | 4 +++-
 web/src/pages/Live.tsx                            | 8 ++++++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index 365fc8ccf..cd0b118c9 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -109,7 +109,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
 
   // groups
 
-  const [group, setGroup, deleteGroup] = usePersistedOverlayState(
+  const [group, setGroup, , deleteGroup] = usePersistedOverlayState(
     "cameraGroup",
     "default" as string,
   );
diff --git a/web/src/hooks/use-overlay-state.tsx b/web/src/hooks/use-overlay-state.tsx
index 5b41ca302..585afd542 100644
--- a/web/src/hooks/use-overlay-state.tsx
+++ b/web/src/hooks/use-overlay-state.tsx
@@ -40,6 +40,7 @@ export function usePersistedOverlayState<S extends string>(
 ): [
   S | undefined,
   (value: S | undefined, replace?: boolean) => void,
+  boolean,
   () => void,
 ] {
   const location = useLocation();
@@ -55,7 +56,7 @@ export function usePersistedOverlayState<S extends string>(
 
   // saved value from previous session
 
-  const [persistedValue, setPersistedValue, , deletePersistedValue] =
+  const [persistedValue, setPersistedValue, loaded, deletePersistedValue] =
     usePersistence<S>(key, overlayStateValue);
 
   const setOverlayStateValue = useCallback(
@@ -73,6 +74,7 @@ export function usePersistedOverlayState<S extends string>(
   return [
     overlayStateValue ?? persistedValue ?? defaultValue,
     setOverlayStateValue,
+    loaded,
     deletePersistedValue,
   ];
 }
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index dec6ad60d..338290153 100644
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@@ -24,17 +24,21 @@ function Live() {
   // selection
 
   const [selectedCameraName, setSelectedCameraName] = useHashState();
-  const [cameraGroup, setCameraGroup] = usePersistedOverlayState(
+  const [cameraGroup, setCameraGroup, loaded, ,] = usePersistedOverlayState(
     "cameraGroup",
     "default" as string,
   );
 
   useSearchEffect("group", (cameraGroup) => {
-    if (config && cameraGroup) {
+    if (config && cameraGroup && loaded) {
       const group = config.camera_groups[cameraGroup];
 
       if (group) {
         setCameraGroup(cameraGroup);
+        // return false so that url cleanup doesn't occur here.
+        // will be cleaned up by usePersistedOverlayState in the
+        // camera group selector so that the icon switches correctly
+        return false;
       }
 
       return true;