From da9a2fa0438575f4ff97135d49775db4d175db53 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 4 May 2024 10:09:19 -0500
Subject: [PATCH] check if persistent options are loaded

---
 .../components/settings/ObjectSettings.tsx    | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/web/src/components/settings/ObjectSettings.tsx b/web/src/components/settings/ObjectSettings.tsx
index 4fdbb0b24..c3ced115b 100644
--- a/web/src/components/settings/ObjectSettings.tsx
+++ b/web/src/components/settings/ObjectSettings.tsx
@@ -64,7 +64,7 @@ export default function ObjectSettings({
     },
   ];
 
-  const [options, setOptions] = usePersistence<Options>(
+  const [options, setOptions, optionsLoaded] = usePersistence<Options>(
     `${selectedCamera}-feed`,
     emptyObject,
   );
@@ -87,17 +87,20 @@ export default function ObjectSettings({
 
   const memoizedObjects = useDeepMemo(objects);
 
-  const searchParams = useMemo(
-    () =>
-      new URLSearchParams(
-        Object.keys(options || {}).reduce((memo, key) => {
-          //@ts-expect-error we know this is correct
-          memo.push([key, options[key] === true ? "1" : "0"]);
-          return memo;
-        }, []),
-      ),
-    [options],
-  );
+  const searchParams = useMemo(() => {
+    if (!optionsLoaded) {
+      return new URLSearchParams();
+    }
+
+    const params = new URLSearchParams(
+      Object.keys(options || {}).reduce((memo, key) => {
+        //@ts-expect-error we know this is correct
+        memo.push([key, options[key] === true ? "1" : "0"]);
+        return memo;
+      }, []),
+    );
+    return params;
+  }, [options, optionsLoaded]);
 
   useEffect(() => {
     document.title = "Object Settings - Frigate";