web: fix org setup when skipping to dashboard during onboarding (#1255)

* fix skip to dashboard with org setup

* adjust spinner color

* type

Author: ameer2468

apps/web/app/(org)/onboarding/components/Bottom.tsx

@@ -43,7 +43,9 @@ export const Bottom = () => {
 			<Button
 				className="px-0 w-fit"
 				variant="transparent"
-				spinner={skipToDashboard.isPending}
+				spinner={true}
+				spinnerColor="black"
+				spinnerBorderColor="rgba(0, 0, 0, 0.2)"
 				disabled={skipToDashboard.isPending || skipToDashboard.isSuccess}
 				size="sm"
 				onClick={() => skipToDashboard.mutate()}

packages/ui/src/components/Button.tsx

@@ -49,6 +49,8 @@ export interface ButtonProps
 	asChild?: boolean;
 	spinner?: boolean;
 	href?: string;
+	spinnerColor?: string;
+	spinnerBorderColor?: `rgba(${number},${number},${number},${number})`;
 	spinnerClassName?: string;
 	kbd?: string;
 	icon?: React.ReactNode;
@@ -63,6 +65,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 			size,
 			asChild = false,
 			spinner = false,
+			spinnerColor = "white",
+			spinnerBorderColor = "rgba(255, 255, 255, 0.2)",
 			spinnerClassName,
 			href,
 			kbd,
@@ -84,6 +88,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 				{spinner && (
 					<LoadingSpinner
 						className={classNames("mr-1", spinnerClassName)}
+						color={spinnerColor}
+						borderColor={spinnerBorderColor}
 						size={16}
 					/>
 				)}

packages/ui/src/components/LoadingSpinner.tsx

@@ -1,12 +1,14 @@
 export const LoadingSpinner = ({
 	size = 36,
 	color = "white",
+	borderColor = "rgba(255, 255, 255, 0.2)",
 	thickness = 3,
 	speed = 1.5,
 	className,
 }: {
 	size?: number;
 	color?: string;
+	borderColor?: string;
 	thickness?: number;
 	speed?: number;
 	className?: string;
@@ -16,7 +18,7 @@ export const LoadingSpinner = ({
 		minWidth: `${size}px`,
 		height: `${size}px`,
 		minHeight: `${size}px`,
-		border: `${thickness}px solid rgba(255, 255, 255, 0.2)`,
+		border: `${thickness}px solid ${borderColor}`,
 		borderTop: `${thickness}px solid ${color}`,
 		borderRadius: "50%",
 		animation: `spin ${1 / speed}s linear infinite`,

packages/web-backend/src/Users/UsersOnboarding.ts

@@ -287,18 +287,26 @@ export class UsersOnboarding extends Effect.Service<UsersOnboarding>()(
 									Dz.eq(Db.organizations.id, currentUser.activeOrganizationId),
 								);
 
-							if (!existingOrg || !user.onboardingSteps?.organizationSetup) {
+							if (!existingOrg) {
+								const newOrgId = Organisation.OrganisationId.make(nanoId());
+								await tx.insert(Db.organizations).values({
+									id: newOrgId,
+									name: orgName,
+									ownerId: currentUser.id,
+								});
+								await tx.insert(Db.organizationMembers).values({
+									id: nanoId(),
+									organizationId: newOrgId,
+									userId: currentUser.id,
+									role: "owner",
+								});
 								await tx
-									.update(Db.organizations)
+									.update(Db.users)
 									.set({
-										name: orgName,
+										activeOrganizationId: newOrgId,
+										defaultOrgId: newOrgId,
 									})
-									.where(
-										Dz.eq(
-											Db.organizations.id,
-											currentUser.activeOrganizationId,
-										),
-									);
+									.where(Dz.eq(Db.users.id, currentUser.id));
 							}
 						}),
 					);