updated image loading

src/components/SightingOverview/SightingOverview.tsx

@@ -5,8 +5,15 @@ import { useOverviewOverlay } from "../../hooks/useOverviewOverlay";
 import { useSightingFeedContext } from "../../context/SightingFeedContext";
 import { useHiDPICanvas } from "../../hooks/useHiDPICanvas";
 import NavigationArrow from "../UI/NavigationArrow";
+import { useSwipeable } from "react-swipeable";
+import { useNavigate } from "react-router";
 
 const SightingOverview = () => {
+  const navigate = useNavigate();
+  const handlers = useSwipeable({
+    onSwipedRight: () => navigate("/front-camera-settings"),
+    trackMouse: true,
+  });
   const [overlayMode, setOverlayMode] = useState<0 | 1 | 2>(0);
 
   const imgRef = useRef<HTMLImageElement | null>(null);
@@ -16,20 +23,17 @@ const SightingOverview = () => {
     setOverlayMode((m) => ((m + 1) % 3) as 0 | 1 | 2);
   }, []);
 
-  const { effectiveSelected } = useSightingFeedContext();
+  const { effectiveSelected, side, mostRecent, noSighting } =
+    useSightingFeedContext();
 
-  useOverviewOverlay(effectiveSelected, overlayMode, imgRef, canvasRef);
+  useOverviewOverlay(mostRecent, overlayMode, imgRef, canvasRef);
 
   const { sync } = useHiDPICanvas(imgRef, canvasRef);
+  if (noSighting) return <p>loading</p>;
   return (
     <div className="mt-2 grid gap-3">
-      {/* <div className="flex items-center gap-3 text-sm">
-        <div className="font-semibold">{effectiveSelected?.vrm ?? "—"}</div>
-        <div>{effectiveSelected?.countryCode ?? "—"}</div>
-        <div className="opacity-80">{effectiveSelected?.timeStamp ?? "—"}</div>
-      </div> */}
-
-      <div className="inline-block">
+      <div className="inline-block w-[90%] mx-auto" {...handlers}>
+        <NavigationArrow side={side} />
         <div className="relative aspect-[5/4]">
           <img
             ref={imgRef}
@@ -37,12 +41,12 @@ const SightingOverview = () => {
               sync();
               setOverlayMode((m) => m);
             }}
-            src={effectiveSelected?.overviewUrl || BLANK_IMG}
+            src={mostRecent?.overviewUrl || BLANK_IMG}
             alt="overview"
             className="absolute inset-0 w-full h-full object-contain cursor-pointer z-10"
             onClick={onOverviewClick}
             style={{
-              display: effectiveSelected?.overviewUrl ? "block" : "none",
+              display: mostRecent?.overviewUrl ? "block" : "none",
             }}
           />
           <canvas