Updated loading states and error states accross app

src/hooks/useCameraBlackboard.ts

@@ -1,9 +1,13 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 import type { CameraBlackBoardOptions } from "../types/types";
+import { useEffect } from "react";
+import { toast } from "sonner";
 
 const getAllBlackboardData = async () => {
-  const response = await fetch(`${CAM_BASE}/api/blackboard`);
+  const response = await fetch(`${CAM_BASE}/api/blackboard`, {
+    signal: AbortSignal.timeout(500),
+  });
   if (!response.ok) {
     throw new Error("Failed to fetch blackboard data");
   }
@@ -36,7 +40,14 @@ export const useCameraBlackboard = () => {
         path: options?.path,
         value: options?.value,
       }),
+    onError: (error) => {
+      toast.error(`cannot get data: ${error.message}`);
+    },
   });
 
+  useEffect(() => {
+    if (query.isError) toast.error(query.error.message);
+  }, [query?.error?.message, query.isError]);
+
   return { query, mutation };
 };