fix(clerk-js): Collapse sections after uploading/removing avatars (#7044)

Author: alexcarpenter

.changeset/three-zebras-boil.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Improve avatar upload and removal UX to auto collapse the profile section upon successful save.

packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx

@@ -63,6 +63,7 @@ export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => {
       .setLogo({ file })
       .then(() => {
         card.setIdle();
+        onSuccess?.();
       })
       .catch(err => handleError(err, [], card.setError));
   };
@@ -72,6 +73,7 @@ export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => {
       .setLogo({ file: null })
       .then(() => {
         card.setIdle();
+        onSuccess?.();
       })
       .catch(err => handleError(err, [], card.setError));
   };

packages/clerk-js/src/ui/components/UserProfile/ProfileForm.tsx

@@ -74,6 +74,7 @@ export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => {
       .setProfileImage({ file })
       .then(() => {
         card.setIdle();
+        onSuccess?.();
       })
       .catch(err => handleError(err, [], card.setError));
   };
@@ -83,6 +84,7 @@ export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => {
       .setProfileImage({ file: null })
       .then(() => {
         card.setIdle();
+        onSuccess?.();
       })
       .catch(err => handleError(err, [], card.setError));
   };