refactor: update camera settings route and improve error/loading messages in components by increasing swipe size

src/components/CameraOverview/SnapshotContainer.tsx

@@ -10,10 +10,10 @@ export const SnapshotContainer = ({
   side,
   settingsPage,
 }: SnapshotContainerProps) => {
-  const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
+  const { canvasRef, isError, isPending } = useGetOverviewSnapshot();
 
-  if (isError) return <>An error occurred</>;
-  if (isPending) return <>Loading...</>;
+  if (isError) return <p className="h-100">An error occurred</p>;
+  if (isPending) return <p className="h-100">Loading...</p>;
 
   const handleZoomClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
     const bounds = canvasRef.current?.getBoundingClientRect();

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

@@ -9,7 +9,7 @@ const FrontCameraOverviewCard = () => {
   useOverviewVideo();
   const navigate = useNavigate();
   const handlers = useSwipeable({
-    onSwipedRight: () => navigate("/front-camera-settings"),
+    onSwipedRight: () => navigate("/camera-settings"),
     trackMouse: true,
   });
 

src/components/SightingOverview/SightingOverview.tsx

@@ -22,9 +22,10 @@ const SightingOverview = () => {
 
   const { sync } = useHiDPICanvas(imgRef, canvasRef);
 
-  if (isLoading) return <p>Loading</p>;
+  if (isLoading) return <p className="h-100">Loading</p>;
 
-  if (isError) return <p>An error occurred, Cannot display footage</p>;
+  if (isError)
+    return <p className="h-100">An error occurred, Cannot display footage</p>;
 
   return (
     <div className="flex flex-col md:flex-row">