Updated loading states and error states accross app

src/components/CameraSettings/CameraSettings.tsx

@@ -1,5 +1,4 @@
 import { useFetchCameraConfig } from "../../hooks/useCameraConfig";
-
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import CameraSettingFields from "./CameraSettingFields";
@@ -16,22 +15,23 @@ const CameraSettings = ({
   zoomLevel?: number;
   onZoomLevelChange?: (level: number) => void;
 }) => {
-  const { data, isError, isPending, updateCameraConfig } =
+  const { data, updateCameraConfig, updateCameraConfigError } =
     useFetchCameraConfig(side);
+  console.log(updateCameraConfigError);
   return (
     <Card className="overflow-hidden min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4">
-      {isPending && <>Loading camera config</>}
-      {isError && <>Error fetching camera config</>}
       <div className="relative flex flex-col space-y-3">
         <CardHeader title={title} icon={faWrench} />
-        {!isPending && (
+
+        {
           <CameraSettingFields
             initialData={data}
             updateCameraConfig={updateCameraConfig}
             zoomLevel={zoomLevel}
             onZoomLevelChange={onZoomLevelChange}
+            updateCameraConfigError={updateCameraConfigError}
           />
-        )}
+        }
       </div>
     </Card>
   );