diff --git a/src/components/CameraSettings/CameraSettings.tsx b/src/components/CameraSettings/CameraSettings.tsx
index 3a7ac69..1c3cb9b 100644
--- a/src/components/CameraSettings/CameraSettings.tsx
+++ b/src/components/CameraSettings/CameraSettings.tsx
@@ -18,19 +18,20 @@ const CameraSettings = ({
 }) => {
   const { data, isError, isPending, updateCameraConfig } =
     useFetchCameraConfig(side);
-
   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} />
-        <CameraSettingFields
-          initialData={data}
-          updateCameraConfig={updateCameraConfig}
-          zoomLevel={zoomLevel}
-          onZoomLevelChange={onZoomLevelChange}
-        />
+        {!isPending && (
+          <CameraSettingFields
+            initialData={data}
+            updateCameraConfig={updateCameraConfig}
+            zoomLevel={zoomLevel}
+            onZoomLevelChange={onZoomLevelChange}
+          />
+        )}
       </div>
     </Card>
   );