Updated loading states and error states accross app

src/hooks/useGetOverviewSnapshot.ts

@@ -3,9 +3,11 @@ import { useQuery } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 
 const apiUrl = CAM_BASE;
-
+// const fetch_url = `http://100.82.205.44/Colour-preview`;
 async function fetchSnapshot(cameraSide: string) {
-  const response = await fetch(`${apiUrl}/${cameraSide}-preview`);
+  const response = await fetch(`${apiUrl}/${cameraSide}-preview`, {
+    signal: AbortSignal.timeout(500),
+  });
   if (!response.ok) {
     throw new Error("Cannot reach endpoint");
   }
@@ -75,9 +77,5 @@ export function useGetOverviewSnapshot(side: string) {
     };
   }, [drawImage]);
 
-  if (isError) {
-    console.error("Snapshot error:", error);
-  }
-
-  return { canvasRef, isError, isPending };
+  return { canvasRef, isError, error, isPending };
 }