From c2d77122a63bb463371644892a27b21c51affc4e Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Fri, 17 Oct 2025 15:20:46 +0300
Subject: [PATCH 1/3] hide icon when removing

---
 .../settings/account/components/ProfileImage.tsx       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/(org)/dashboard/settings/account/components/ProfileImage.tsx b/apps/web/app/(org)/dashboard/settings/account/components/ProfileImage.tsx
index e401c3a68b..34ef6505c2 100644
--- a/apps/web/app/(org)/dashboard/settings/account/components/ProfileImage.tsx
+++ b/apps/web/app/(org)/dashboard/settings/account/components/ProfileImage.tsx
@@ -124,10 +124,12 @@ export function ProfileImage({
 									onClick={handleRemove}
 									spinner={isRemoving}
 								>
-									<FontAwesomeIcon
-										icon={faTrash}
-										className="size-2.5 text-gray-12"
-									/>
+									{isRemoving ? null : (
+										<FontAwesomeIcon
+											icon={faTrash}
+											className="size-2.5 text-gray-12"
+										/>
+									)}
 								</Button>
 							</Tooltip>
 						)}

From 4cdc50d9c1332f1370b984d0835967ec69b50af8 Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Fri, 17 Oct 2025 15:40:45 +0300
Subject: [PATCH 2/3] update skeleton

---
 .../account/components/ProfileImage.tsx       |  24 ++--
 .../dashboard/settings/account/loading.tsx    | 136 +++++++++++++-----
 2 files changed, 112 insertions(+), 48 deletions(-)

diff --git a/apps/web/app/(org)/dashboard/settings/account/components/ProfileImage.tsx b/apps/web/app/(org)/dashboard/settings/account/components/ProfileImage.tsx
index 34ef6505c2..a1cdcec999 100644
--- a/apps/web/app/(org)/dashboard/settings/account/components/ProfileImage.tsx
+++ b/apps/web/app/(org)/dashboard/settings/account/components/ProfileImage.tsx
@@ -101,25 +101,23 @@ export function ProfileImage({
 				/>
 				<div className="space-y-3">
 					<div className="flex gap-2">
-						{!isRemoving && (
-							<Button
-								type="button"
-								variant="gray"
-								disabled={disabled || isLoading}
-								size="xs"
-								onClick={handleUploadClick}
-								spinner={isUploading}
-							>
-								{isUploading ? "Uploading..." : "Upload Image"}
-							</Button>
-						)}
+						<Button
+							type="button"
+							variant="gray"
+							disabled={disabled || isLoading || isRemoving}
+							size="xs"
+							onClick={handleUploadClick}
+							spinner={isUploading}
+						>
+							{isUploading ? "Uploading..." : "Upload Image"}
+						</Button>
 						{(previewUrl || isRemoving) && (
 							<Tooltip content="Remove image">
 								<Button
 									type="button"
 									variant="outline"
 									className="p-0 size-8"
-									disabled={disabled || isLoading}
+									disabled={disabled || isLoading || isRemoving}
 									size="icon"
 									onClick={handleRemove}
 									spinner={isRemoving}
diff --git a/apps/web/app/(org)/dashboard/settings/account/loading.tsx b/apps/web/app/(org)/dashboard/settings/account/loading.tsx
index be44862a3c..62440b163e 100644
--- a/apps/web/app/(org)/dashboard/settings/account/loading.tsx
+++ b/apps/web/app/(org)/dashboard/settings/account/loading.tsx
@@ -7,44 +7,85 @@ export default function Loading() {
 		<SkeletonPage
 			customSkeleton={(Skeleton) => (
 				<form>
-					<div className="flex flex-col flex-wrap gap-6 w-full md:flex-row">
-						{/* First card - Name fields */}
-						<div className="flex-1 p-5 space-y-1 rounded-2xl border bg-gray-3 border-gray-4">
-							<Skeleton
-								baseColor="var(--gray-4)"
-								highlightColor="var(--gray-5)"
-								className="w-32 h-7"
-							/>{" "}
-							{/* Card title */}
-							<Skeleton
-								baseColor="var(--gray-4)"
-								highlightColor="var(--gray-5)"
-								count={2}
-								className="mt-1 h-4"
-							/>{" "}
-							{/* Card description */}
-							<div className="flex flex-col flex-wrap gap-5 pt-4 w-full md:flex-row">
-								<div className="flex-1 space-y-2">
-									<Skeleton
-										baseColor="var(--gray-4)"
-										highlightColor="var(--gray-5)"
-										className="w-full h-12 rounded-xl"
-									/>{" "}
-									{/* First name input */}
-								</div>
-								<div className="flex-1 space-y-2">
-									<Skeleton
-										baseColor="var(--gray-4)"
-										highlightColor="var(--gray-5)"
-										className="w-full h-12 rounded-xl"
-									/>{" "}
-									{/* Last name input */}
+					<div className="grid gap-6 w-full md:grid-cols-2">
+						{/* Profile image card */}
+						<div className="flex flex-col p-5 space-y-4 rounded-2xl border bg-gray-3 border-gray-4">
+							<div className="space-y-1">
+								<Skeleton
+									baseColor="var(--gray-4)"
+									highlightColor="var(--gray-5)"
+									className="w-32 h-7"
+								/>{" "}
+								{/* Card title */}
+								<Skeleton
+									baseColor="var(--gray-4)"
+									highlightColor="var(--gray-5)"
+									count={1}
+									className="mt-1 h-4"
+								/>{" "}
+								{/* Card description */}
+							</div>
+							<div className="flex-1 rounded-xl border border-dashed bg-gray-2 border-gray-4">
+								<div className="flex gap-5 p-5 h-full">
+									<div className="flex justify-center items-center rounded-full border border-dashed size-14 bg-gray-3 border-gray-6">
+										<Skeleton
+											baseColor="var(--gray-5)"
+											highlightColor="var(--gray-6)"
+											className="size-4"
+										/>{" "}
+										{/* Icon placeholder */}
+									</div>
+									<div className="flex-1 space-y-3">
+										<Skeleton
+											baseColor="var(--gray-4)"
+											highlightColor="var(--gray-5)"
+											className="w-full h-3 max-w-20"
+										/>
+										<Skeleton
+											baseColor="var(--gray-4)"
+											highlightColor="var(--gray-5)"
+											className="w-full h-3 max-w-[120px]"
+										/>
+									</div>
 								</div>
 							</div>
 						</div>
 
-						{/* Second card - Email field */}
-						<div className="flex flex-col flex-1 gap-4 justify-between items-stretch p-5 rounded-2xl border bg-gray-3 border-gray-4">
+						{/* Your name card */}
+						<div className="p-5 space-y-4 rounded-2xl border bg-gray-3 border-gray-4">
+							<div className="space-y-1">
+								<Skeleton
+									baseColor="var(--gray-4)"
+									highlightColor="var(--gray-5)"
+									className="w-24 h-7"
+								/>{" "}
+								{/* Card title */}
+								<Skeleton
+									baseColor="var(--gray-4)"
+									highlightColor="var(--gray-5)"
+									count={2}
+									className="mt-1 h-4"
+								/>{" "}
+								{/* Card description */}
+							</div>
+							<div className="flex flex-col flex-wrap gap-3 w-full">
+								<Skeleton
+									baseColor="var(--gray-4)"
+									highlightColor="var(--gray-5)"
+									className="w-full h-12 rounded-xl"
+								/>{" "}
+								{/* First name input */}
+								<Skeleton
+									baseColor="var(--gray-4)"
+									highlightColor="var(--gray-5)"
+									className="w-full h-12 rounded-xl"
+								/>{" "}
+								{/* Last name input */}
+							</div>
+						</div>
+
+						{/* Contact email card */}
+						<div className="flex flex-col gap-4 p-5 rounded-2xl border bg-gray-3 border-gray-4">
 							<div className="space-y-1">
 								<Skeleton
 									baseColor="var(--gray-4)"
@@ -67,6 +108,31 @@ export default function Loading() {
 							/>{" "}
 							{/* Email input */}
 						</div>
+
+						{/* Default organization card */}
+						<div className="flex flex-col gap-4 p-5 rounded-2xl border bg-gray-3 border-gray-4">
+							<div className="space-y-1">
+								<Skeleton
+									baseColor="var(--gray-4)"
+									highlightColor="var(--gray-5)"
+									className="w-40 h-7"
+								/>{" "}
+								{/* Card title */}
+								<Skeleton
+									baseColor="var(--gray-4)"
+									highlightColor="var(--gray-5)"
+									count={1}
+									className="mt-1 h-4"
+								/>{" "}
+								{/* Card description */}
+							</div>
+							<Skeleton
+								baseColor="var(--gray-4)"
+								highlightColor="var(--gray-5)"
+								className="w-full h-12 rounded-xl"
+							/>{" "}
+							{/* Select dropdown */}
+						</div>
 					</div>
 
 					{/* Save button */}
@@ -74,7 +140,7 @@ export default function Loading() {
 						<Skeleton
 							baseColor="var(--gray-4)"
 							highlightColor="var(--gray-5)"
-							className="h-10 rounded-xl"
+							className="h-9 rounded-lg"
 						/>{" "}
 						{/* Button */}
 					</div>

From fec778cae6917533fb50516e4b19f9026e8fee33 Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Fri, 17 Oct 2025 15:46:34 +0300
Subject: [PATCH 3/3] add spinner classname

---
 .../settings/account/components/ProfileImage.tsx         | 3 ++-
 packages/ui/src/components/Button.tsx                    | 9 ++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/web/app/(org)/dashboard/settings/account/components/ProfileImage.tsx b/apps/web/app/(org)/dashboard/settings/account/components/ProfileImage.tsx
index a1cdcec999..e2a6948e11 100644
--- a/apps/web/app/(org)/dashboard/settings/account/components/ProfileImage.tsx
+++ b/apps/web/app/(org)/dashboard/settings/account/components/ProfileImage.tsx
@@ -120,12 +120,13 @@ export function ProfileImage({
 									disabled={disabled || isLoading || isRemoving}
 									size="icon"
 									onClick={handleRemove}
+									spinnerClassName="mr-0"
 									spinner={isRemoving}
 								>
 									{isRemoving ? null : (
 										<FontAwesomeIcon
 											icon={faTrash}
-											className="size-2.5 text-gray-12"
+											className="size-2.5 text-gray-12 mx-auto"
 										/>
 									)}
 								</Button>
diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
index ea83036983..45f322dfab 100644
--- a/packages/ui/src/components/Button.tsx
+++ b/packages/ui/src/components/Button.tsx
@@ -49,6 +49,7 @@ export interface ButtonProps
 	asChild?: boolean;
 	spinner?: boolean;
 	href?: string;
+	spinnerClassName?: string;
 	kbd?: string;
 	icon?: React.ReactNode;
 	target?: string;
@@ -62,6 +63,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 			size,
 			asChild = false,
 			spinner = false,
+			spinnerClassName,
 			href,
 			kbd,
 			icon,
@@ -79,7 +81,12 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 				href={href || undefined}
 				{...props}
 			>
-				{spinner && <LoadingSpinner className="mr-1" size={16} />}
+				{spinner && (
+					<LoadingSpinner
+						className={classNames("mr-1", spinnerClassName)}
+						size={16}
+					/>
+				)}
 				{icon && icon}
 				{props.children}
 				{kbd && (