fix(forms): add loading state for company document removal

Block uploads and other document actions while a file is being removed, and show per-item and global loading feedback until deletion completes.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/forms/companies/documents/CompanyDocuments.tsx

@@ -13,6 +13,8 @@ interface IProps {
 const CompanyDocuments = ({ companyId, value, onChange }: IProps) => {
   const {
     isUploading,
+    isBusy,
+    removingFileId,
     uploadProgress,
     failed,
     errorMessage,
@@ -32,11 +34,16 @@ const CompanyDocuments = ({ companyId, value, onChange }: IProps) => {
           accept={DOCUMENT_FILE_ACCEPT}
           className="sr-only"
           onChange={onSelectFiles}
-          disabled={isUploading}
+          disabled={isBusy}
         />
         <label
           htmlFor={inputId}
-          className="group flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed border-stroke/80 bg-white/70 px-4 py-9 text-center transition-all duration-300 hover:-translate-y-0.5 hover:border-primary hover:bg-primary/[0.03] dark:border-dark-3 dark:bg-dark/20 dark:hover:bg-primary/[0.08]"
+          aria-disabled={isBusy}
+          className={`group flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-stroke/80 bg-white/70 px-4 py-9 text-center transition-all duration-300 dark:border-dark-3 dark:bg-dark/20 ${
+            isBusy
+              ? "cursor-not-allowed opacity-60"
+              : "cursor-pointer hover:-translate-y-0.5 hover:border-primary hover:bg-primary/[0.03] dark:hover:bg-primary/[0.08]"
+          }`}
         >
           <div className="mb-3 rounded-2xl bg-primary/[0.12] p-3 text-primary shadow-theme-xs transition-transform duration-300 group-hover:scale-105">
             <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -71,6 +78,13 @@ const CompanyDocuments = ({ companyId, value, onChange }: IProps) => {
               />
             </div>
           </div>
+        ) : removingFileId ? (
+          <div className="mt-3">
+            <p className="text-xs font-medium text-primary">Removing document…</p>
+            <div className="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-gray-2 dark:bg-dark-3">
+              <div className="h-full w-full animate-pulse rounded-full bg-gradient-to-r from-primary to-purple-500" />
+            </div>
+          </div>
         ) : null}
       </div>
 
@@ -85,7 +99,8 @@ const CompanyDocuments = ({ companyId, value, onChange }: IProps) => {
               key={fileId}
               fileId={fileId}
               onRemove={onRemove}
-              disabled={isUploading}
+              disabled={isBusy}
+              isRemoving={removingFileId === fileId}
             />
           ))}
         </div>