Frontend fixes (#22294)

* fix useImageLoaded hook running on every render

* fix volume not applying for all cameras

* Fix maximum update depth exceeded errors on Review page

- use-overlay-state: use refs for location to keep setter identity
  stable across renders, preventing cascading re-render loops when
  effects depend on the setter. Add Object.is bail-out guard to skip
  redundant navigate calls. Move setPersistedValue after bail-out to
  avoid unnecessary IndexedDB writes.

* don't try to fetch previews when motion search dialog is open

* revert unneeded changes

re-rendering was caused by the overlay state hook, not this one

* filter dicts to only use id field in sync recordings

web/src/views/live/DraggableGridLayout.tsx

@@ -632,9 +632,10 @@ export default function DraggableGridLayout({
                   toggleStats={() => toggleStats(camera.name)}
                   volumeState={volumeStates[camera.name]}
                   setVolumeState={(value) =>
-                    setVolumeStates({
+                    setVolumeStates((prev) => ({
+                      ...prev,
                       [camera.name]: value,
-                    })
+                    }))
                   }
                   muteAll={muteAll}
                   unmuteAll={unmuteAll}

web/src/views/motion-search/MotionSearchView.tsx

@@ -131,12 +131,10 @@ export default function MotionSearchView({
   );
 
   // Camera previews – defer until dialog is closed
-  const allPreviews = useCameraPreviews(
-    isSearchDialogOpen ? { after: 0, before: 0 } : timeRange,
-    {
-      camera: selectedCamera ?? undefined,
-    },
-  );
+  const allPreviews = useCameraPreviews(timeRange, {
+    camera: selectedCamera ?? undefined,
+    fetchPreviews: !isSearchDialogOpen,
+  });
 
   // ROI state
   const [polygonPoints, setPolygonPoints] = useState<number[][]>([]);