chore: fix loading state

Author: G3root

src/components/billing/pricing-modal/index.tsx

@@ -68,7 +68,7 @@ function Plans({ products, subscription }: PricingProps) {
     await stripePortal(data);
   };
 
-  const loading = checkoutLoading || stripePortalLoading;
+  const isSubmitting = checkoutLoading || stripePortalLoading;
 
   return (
     <div className="flex flex-col items-center justify-center">
@@ -112,8 +112,7 @@ function Plans({ products, subscription }: PricingProps) {
               description={product.description}
               price={priceString}
               interval={billingInterval}
-              subscribed={!!subscription}
-              onClick={() => {
+              handleClick={() => {
                 if (subscription) {
                   return handleBillingPortal({
                     ...(active
@@ -132,9 +131,9 @@ function Plans({ products, subscription }: PricingProps) {
                   priceType: price.type,
                 });
               }}
-              loading={loading}
               subscribedUnitAmount={subscription?.price.unitAmount}
               unitAmount={unitAmount}
+              isSubmitting={isSubmitting}
             />
           );
         })}

src/components/billing/pricing-modal/pricing-card.tsx

@@ -8,15 +8,18 @@ import {
 } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 import type { PricingPlanInterval } from "@/prisma/enums";
+import { useState } from "react";
 
-interface PricingCardProps extends Omit<ButtonProps, "children"> {
+interface PricingCardProps {
   title: string;
   description?: string | null;
   price: string;
   interval: PricingPlanInterval;
-  subscribed: boolean;
   subscribedUnitAmount?: bigint | null;
   unitAmount: number;
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  handleClick: () => Promise<any>;
+  isSubmitting: boolean;
 }
 
 const humanizedInterval: Record<PricingPlanInterval, string> = {
@@ -31,11 +34,12 @@ export function PricingCard({
   title,
   interval,
   price,
-  subscribed,
   subscribedUnitAmount: subscribedUnitAmount_,
   unitAmount,
-  ...rest
+  handleClick,
+  isSubmitting,
 }: PricingCardProps) {
+  const [isLoading, setIsLoading] = useState(false);
   const subscribedUnitAmount = subscribedUnitAmount_
     ? Number(subscribedUnitAmount_)
     : null;
@@ -56,12 +60,15 @@ export function PricingCard({
       </CardHeader>
       <CardFooter>
         <Button
-          {...rest}
-          className={cn(
-            rest.className,
-            !active && "bg-teal-500 hover:bg-teal-500/80",
-          )}
+          className={cn(!active && "bg-teal-500 hover:bg-teal-500/80")}
           {...(active && { variant: "destructive" })}
+          onClick={async () => {
+            setIsLoading(true);
+            await handleClick();
+            setIsLoading(false);
+          }}
+          loading={isLoading}
+          {...(!isLoading && { disabled: isSubmitting })}
         >
           {subscribedUnitAmount
             ? unitAmount < subscribedUnitAmount