Address review feedback

Author: federico-ercoles

packages/bento-design-system/src/FileUploaderField/FileUploaderField.tsx

@@ -144,7 +144,11 @@ export function FileUploaderField<E extends string>({
 }: Props<E>) {
   const config = useBentoConfig().fileUploaderField;
   const height = height_ ?? config.defaultHeight;
+
   const [uploading, setUploading] = useState<boolean>(isUploading ?? false);
+  useEffect(() => {
+    isUploading !== undefined && setUploading(isUploading);
+  }, [isUploading]);
 
   // note(Fede): useDropzone already exposes a `isDragActive` flag, but it is true
   // only when a file is dragged over the component, not the whole window, which is what we prefer.

packages/storybook/stories/Components/FileUploaderField.stories.tsx

@@ -1,5 +1,6 @@
+import { useState } from "react";
 import { StoryFn } from "@storybook/react";
-import { FileUploaderField, BentoConfigProvider } from "..";
+import { FileUploaderField, BentoConfigProvider, Button, Stack } from "..";
 import { createComponentStories } from "../util";
 
 const { defaultExport, createControlledStory } = createComponentStories({
@@ -33,11 +34,27 @@ const fileUploaderProps = {
 
 export const fileUploaderField = createControlledStory(undefined, fileUploaderProps);
 
-export const loading = createControlledStory(undefined, {
-  ...fileUploaderProps,
-  isUploading: true,
-});
-loading.parameters = {
+export const Loading = () => {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Stack space={16}>
+      <FileUploaderField
+        {...fileUploaderProps}
+        value={undefined}
+        onChange={() => {}}
+        isUploading={loading}
+      />
+      <Button
+        kind="solid"
+        hierarchy="primary"
+        label={loading ? "Stop loading" : "Start loading"}
+        onPress={() => setLoading(!loading)}
+      />
+    </Stack>
+  );
+};
+Loading.parameters = {
   chromatic: { pauseAnimationAtEnd: true },
 };