gallery:

src/components/UploadBoxDraggble.tsx

@@ -11,7 +11,12 @@ type Props = {
     preview?: string[],
     onChangePreview?: (preview: string[]) => void,
     getCover?: (url: string) => void,
-    coverUrl?: string
+    coverUrl?: string,
+    /** نمایش وضعیت بارگذاری داخل باکس آپلود */
+    isLoading?: boolean,
+    loadingLabel?: string,
+    /** بدون پیش‌نمایش زیر باکس (مثلاً گالری جداگانه دارد) */
+    hidePreview?: boolean,
 }
 
 const UploadBoxDraggble: FC<Props> = (props: Props) => {
@@ -21,6 +26,10 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
     const [cover, setCover] = useState<string>(props.coverUrl ?? "");
 
     const onDrop = useCallback((acceptedFiles: File[]) => {
+        if (props.hidePreview) {
+            props.onChange(acceptedFiles);
+            return;
+        }
         // وقتی parent با preview و onChangePreview مدیریت می‌کند، فقط onChange بزن تا فقط یک ردیف (perviews) نمایش داده شود
         if (props.preview !== undefined && props.onChangePreview) {
             props.onChange(acceptedFiles);
@@ -36,7 +45,10 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [files]);
-    const { getRootProps, getInputProps } = useDropzone({ onDrop })
+    const { getRootProps, getInputProps } = useDropzone({
+        onDrop,
+        disabled: props.isLoading,
+    })
 
     const handleDelete = (index: number) => {
         const array = [...files]
@@ -67,27 +79,44 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
 
     return (
         <div>
-            <div {...getRootProps()} className='w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl'>
+            <div
+                {...getRootProps()}
+                className={clx(
+                    'relative w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl',
+                    props.isLoading && 'pointer-events-none opacity-80',
+                )}
+            >
                 <input {...getInputProps()} />
-                <Gallery
-                    className='size-8'
-                    color='#8C90A3'
-                />
-                <div className='text-description text-xs'>
-                    {props.label}
-                </div>
+                {props.isLoading ? (
+                    <>
+                        <span className="h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-black" />
+                        <div className="text-description text-xs">
+                            {props.loadingLabel ?? 'در حال آپلود...'}
+                        </div>
+                    </>
+                ) : (
+                    <>
+                        <Gallery
+                            className='size-8'
+                            color='#8C90A3'
+                        />
+                        <div className='text-description text-xs'>
+                            {props.label}
+                        </div>
 
-                <div className='flex items-center gap-2'>
-                    <DocumentUpload
-                        className='size-4'
-                        color='black'
-                    />
-                    <div className='text-xs'>آپلود</div>
-                </div>
+                        <div className='flex items-center gap-2'>
+                            <DocumentUpload
+                                className='size-4'
+                                color='black'
+                            />
+                            <div className='text-xs'>آپلود</div>
+                        </div>
+                    </>
+                )}
             </div>
 
             {
-                files.length > 0 || perviews.length > 0 ? (
+                !props.hidePreview && (files.length > 0 || perviews.length > 0) ? (
                     <div className='mt-4 flex gap-4 items-center'>
                         {
                             perviews && perviews.map((item, index) => {