Add loading state to buttons

src/components/form-button.tsx

@@ -0,0 +1,21 @@
+import { Loader2 } from "lucide-react";
+import React from "react";
+
+import { Button, ButtonProps } from "./ui/button";
+
+interface FormButtonProps extends ButtonProps {
+  loading?: boolean;
+}
+
+export const FormButton = ({
+  loading,
+  children,
+  ...props
+}: FormButtonProps) => {
+  return (
+    <Button {...props} disabled={loading}>
+      {loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+      {children}
+    </Button>
+  );
+};

src/components/ui/button.tsx

@@ -33,7 +33,7 @@ const buttonVariants = cva(
   },
 );
 
-interface ButtonProps
+export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;

src/modules/checkout-details/components/billing.tsx

@@ -6,7 +6,7 @@ import { useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { ErrorToastDescription } from "@/components/error-toast-description";
-import { Button } from "@/components/ui/button";
+import { FormButton } from "@/components/form-button";
 import {
   Form,
   FormControl,
@@ -199,13 +199,14 @@ export const Billing = (props: {
             </div>
           </div>
           <div className="grid">
-            <Button
+            <FormButton
               type="submit"
               variant="secondary"
               className="justify-self-end"
+              loading={form.formState.isSubmitting}
             >
               Save billing address
-            </Button>
+            </FormButton>
           </div>
         </form>
       </Form>

src/modules/checkout-details/components/delivery-method.tsx

@@ -5,7 +5,7 @@ import { useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { ErrorToastDescription } from "@/components/error-toast-description";
-import { Button } from "@/components/ui/button";
+import { FormButton } from "@/components/form-button";
 import {
   Form,
   FormControl,
@@ -139,9 +139,13 @@ export const DeliveryMethod = (props: {
               )}
             />
             <div className="grid">
-              <Button type="submit" className="justify-self-end">
+              <FormButton
+                type="submit"
+                className="justify-self-end"
+                loading={form.formState.isSubmitting}
+              >
                 Submit
-              </Button>
+              </FormButton>
             </div>
           </form>
         </Form>

src/modules/checkout-details/components/shipping.tsx

@@ -6,7 +6,7 @@ import { useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { ErrorToastDescription } from "@/components/error-toast-description";
-import { Button } from "@/components/ui/button";
+import { FormButton } from "@/components/form-button";
 import {
   Form,
   FormControl,
@@ -199,13 +199,14 @@ export const Shipping = (props: {
             </div>
           </div>
           <div className="grid">
-            <Button
+            <FormButton
               type="submit"
               variant="secondary"
               className="justify-self-end"
+              loading={form.formState.isSubmitting}
             >
               Save shipping address
-            </Button>
+            </FormButton>
           </div>
         </form>
       </Form>

src/modules/environment/components/cart.tsx

@@ -1,8 +1,11 @@
+"use client";
+
 import { FragmentOf, graphql, readFragment } from "gql.tada";
 import Image from "next/image";
+import { useState } from "react";
 
 import { ErrorToastDescription } from "@/components/error-toast-description";
-import { Button } from "@/components/ui/button";
+import { FormButton } from "@/components/form-button";
 import { toast } from "@/components/ui/use-toast";
 
 import { createCheckout } from "../actions/create-checkout";
@@ -36,26 +39,30 @@ export const Cart = (props: {
   envUrl: string;
   channelSlug: string;
 }) => {
+  const [loading, setLoading] = useState(false);
   const { envUrl, channelSlug, data } = props;
   const products = data.map((product) =>
     readFragment(ProductFragment, product),
   );
 
   const onClick = async () => {
+    setLoading(true);
     const checkout = await createCheckout({
       envUrl,
       channelSlug,
       variantId: products[0].defaultVariant?.id ?? "",
     });
 
     if (checkout?.isErr()) {
+      setLoading(false);
       return toast({
         title: `${checkout.error.name}: ${checkout.error.message}`,
         variant: "destructive",
         description: <ErrorToastDescription details={checkout.error.errors} />,
       });
     }
 
+    setLoading(false);
     toast({
       title: "Successfully created checkout",
     });
@@ -93,9 +100,14 @@ export const Cart = (props: {
           </div>
         ))}
         <div className="grid">
-          <Button type="submit" onClick={onClick} className="justify-self-end">
+          <FormButton
+            type="submit"
+            onClick={onClick}
+            className="justify-self-end"
+            loading={loading}
+          >
             Create checkout
-          </Button>
+          </FormButton>
         </div>
       </div>
     </div>

src/modules/environment/components/environment.tsx

@@ -6,7 +6,8 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-import { Button } from "@/components/ui/button";
+import { ErrorToastDescription } from "@/components/error-toast-description";
+import { FormButton } from "@/components/form-button";
 import {
   Form,
   FormControl,
@@ -19,7 +20,6 @@ import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/use-toast";
 import { env } from "@/env";
 
-import { ErrorToastDescription } from "../../../components/error-toast-description";
 import { fetchProduct } from "../actions";
 import { Cart, ProductFragment } from "./cart";
 
@@ -103,13 +103,14 @@ export const Environment = () => {
               />
             </div>
             <div className="grid">
-              <Button
+              <FormButton
                 type="submit"
                 variant="secondary"
                 className="justify-self-end"
+                loading={form.formState.isSubmitting}
               >
                 Fetch products
-              </Button>
+              </FormButton>
             </div>
           </form>
         </Form>

src/modules/payment-gateway/components/payment-gateway-select.tsx

@@ -5,7 +5,7 @@ import { FragmentOf, readFragment } from "gql.tada";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-import { Button } from "@/components/ui/button";
+import { FormButton } from "@/components/form-button";
 import {
   Form,
   FormControl,
@@ -100,9 +100,13 @@ export const PaymentGatewaySelect = (props: {
               )}
             />
             <div className="grid">
-              <Button type="submit" className="justify-self-end">
+              <FormButton
+                type="submit"
+                className="justify-self-end"
+                loading={form.formState.isSubmitting}
+              >
                 Submit
-              </Button>
+              </FormButton>
             </div>
           </form>
         </Form>

src/modules/summary/components/summary.tsx

@@ -4,8 +4,10 @@ import { lightFormat } from "date-fns";
 import { FragmentOf, readFragment } from "gql.tada";
 import { Copy, SquareArrowOutUpRight } from "lucide-react";
 import Link from "next/link";
+import { useState } from "react";
 
 import { ErrorToastDescription } from "@/components/error-toast-description";
+import { FormButton } from "@/components/form-button";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -30,6 +32,7 @@ export const Summary = (props: {
   data: FragmentOf<typeof CheckoutFragment> | null;
   envUrl: string;
 }) => {
+  const [loading, setLoading] = useState(false);
   const { data, envUrl } = props;
   const checkout = readFragment(CheckoutFragment, data);
 
@@ -38,19 +41,22 @@ export const Summary = (props: {
   }
 
   const onCompleteButtonClick = async () => {
+    setLoading(true);
     const response = await completeCheckout({
       envUrl,
       checkoutId: checkout.id,
     });
 
     if (response.isErr()) {
+      setLoading(false);
       return toast({
         title: `${response.error.name}: ${response.error.message}`,
         variant: "destructive",
         description: <ErrorToastDescription details={response.error.errors} />,
       });
     }
 
+    setLoading(false);
     toast({
       title: "Successfully completed checkout",
       description: (
@@ -199,7 +205,9 @@ export const Summary = (props: {
         <Link href="/">
           <Button variant="link">Go to home page</Button>
         </Link>
-        <Button onClick={onCompleteButtonClick}>Complete checkout</Button>
+        <FormButton onClick={onCompleteButtonClick} loading={loading}>
+          Complete checkout
+        </FormButton>
       </CardFooter>
     </Card>
   );