Misc UI fixes (#11237)

* add close button to all toasters

* check if persistent options are loaded

* add id to prevent message duplication in bottom bar

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";
@@ -109,7 +112,7 @@ export default function ObjectSettings({
 
   return (
     <div className="flex flex-col md:flex-row size-full">
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
         <Heading as="h3" className="my-2">
           Debug