UI fix: revert removed code from button loading/icon states

ui/admin/app/components/oauth-apps/OAuthAppDetail.tsx

@@ -54,7 +54,7 @@ export function OAuthAppDetail({
                     <Button
                         size="icon"
                         variant="ghost"
-                        className={cn(className)}
+                        className={cn("mt-0", className)}
                     >
                         <SettingsIcon />
                     </Button>

ui/admin/app/components/oauth-apps/OAuthAppTile.tsx

@@ -41,7 +41,7 @@ export function OAuthAppTile({
                 "border-2 border-primary": info.appOverride,
             })}
         >
-            <CardHeader className="flex flex-row justify-between pb-2">
+            <CardHeader className="flex flex-row justify-between items-start pb-2 space-y-0">
                 <div className="flex flex-wrap gap-2 items-center">
                     <TypographyH3 className="min-w-fit">
                         {displayName}

ui/admin/app/components/oauth-apps/custom/CustomOAuthAppForm.tsx

@@ -108,8 +108,15 @@ export function CustomOAuthAppForm({
         defaultValues,
     });
 
-    const { isFinalStep, nextLabel, prevLabel, onBack, onNext, disableSubmit } =
-        getStepInfo(step);
+    const {
+        isFinalStep,
+        nextLabel,
+        prevLabel,
+        isLoading,
+        onBack,
+        onNext,
+        disableSubmit,
+    } = getStepInfo(step);
 
     useEffect(() => {
         form.reset(defaultValues);
@@ -237,6 +244,7 @@ export function CustomOAuthAppForm({
                     <Button
                         className="flex-1 w-full"
                         type="submit"
+                        loading={isLoading}
                         disabled={disableSubmit}
                     >
                         {nextLabel}

ui/admin/app/components/oauth-apps/custom/CustomOAuthAppTile.tsx

@@ -67,6 +67,7 @@ export function CustomOAuthAppTile({ app }: CustomOAuthAppTileProps) {
                             size="icon"
                             className="w-8 h-8 p-0"
                             disabled={deleteApp.isLoading}
+                            loading={deleteApp.isLoading}
                         >
                             <Trash />
                         </Button>

ui/admin/app/components/ui/button.tsx

@@ -1,5 +1,6 @@
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "~/lib/utils";
@@ -24,7 +25,7 @@ const buttonVariants = cva(
                 default: "h-9 px-4 py-2",
                 sm: "h-8 rounded-md px-3 text-xs",
                 lg: "h-10 rounded-md px-8",
-                icon: "h-9 w-9",
+                icon: "h-9 w-9 [&_svg]:size-[1.375rem]",
             },
         },
         defaultVariants: {
@@ -38,18 +39,47 @@ export interface ButtonProps
     extends React.ButtonHTMLAttributes<HTMLButtonElement>,
         VariantProps<typeof buttonVariants> {
     asChild?: boolean;
+    loading?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ className, variant, size, asChild = false, ...props }, ref) => {
+    (
+        {
+            className,
+            variant,
+            size,
+            asChild = false,
+            loading = false,
+            children,
+            ...props
+        },
+        ref
+    ) => {
         const Comp = asChild ? Slot : "button";
+
         return (
             <Comp
                 className={cn(buttonVariants({ variant, size, className }))}
                 ref={ref}
                 {...props}
-            />
+            >
+                {getContent()}
+            </Comp>
         );
+
+        function getContent() {
+            if (size === "icon" && loading)
+                return <Loader2 className="animate-spin" />;
+
+            return loading ? (
+                <>
+                    <Loader2 className="mr-2 animate-spin" />
+                    {children}
+                </>
+            ) : (
+                children
+            );
+        }
     }
 );
 Button.displayName = "Button";