chore(demo): replace isLoading using useTransition (#3775)

* fix: use `useTransition` for isLoading

* fixup! fix: use `useTransition` for isLoading

demo/nextjs/app/client-test/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useTransition } from "react";
 import { signIn, client } from "@/lib/auth-client";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,13 +19,13 @@ import { Loader2 } from "lucide-react";
 export default function ClientTest() {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
-	const [loading, setLoading] = useState(false);
+	const [loading, startTransition] = useTransition();
 
 	// Get the session data using the useSession hook
 	const { data: session, isPending, error } = client.useSession();
 
 	const handleLogin = async () => {
-		setLoading(true);
+		startTransition(async () => {
 			await signIn.email(
 				{
 					email,
@@ -33,9 +33,6 @@ export default function ClientTest() {
 					callbackURL: "/client-test",
 				},
 				{
-				onResponse: () => {
-					setLoading(false);
-				},
 					onError: (ctx) => {
 						toast.error(ctx.error.message);
 					},
@@ -46,6 +43,7 @@ export default function ClientTest() {
 					},
 				},
 			);
+		});
 	};
 
 	return (

demo/nextjs/app/dashboard/user-card.tsx

@@ -42,7 +42,7 @@ import {
 } from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useState, useTransition } from "react";
 import { toast } from "sonner";
 import { UAParser } from "ua-parser-js";
 import {
@@ -657,7 +657,7 @@ function EditUserDialog() {
 		}
 	};
 	const [open, setOpen] = useState<boolean>(false);
-	const [isLoading, setIsLoading] = useState<boolean>(false);
+	const [isLoading, startTransition] = useTransition();
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger asChild>
@@ -720,7 +720,7 @@ function EditUserDialog() {
 					<Button
 						disabled={isLoading}
 						onClick={async () => {
-							setIsLoading(true);
+							startTransition(async () => {
 								await client.updateUser({
 									image: image ? await convertImageToBase64(image) : undefined,
 									name: name ? name : undefined,
@@ -733,12 +733,14 @@ function EditUserDialog() {
 										},
 									},
 								});
+								startTransition(() => {
 									setName("");
 									router.refresh();
 									setImage(null);
 									setImagePreview(null);
-							setIsLoading(false);
 									setOpen(false);
+								});
+							});
 						}}
 					>
 						{isLoading ? (

demo/nextjs/components/sign-in.tsx

@@ -12,7 +12,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
-import { useState } from "react";
+import { useState, useTransition } from "react";
 import { Loader2 } from "lucide-react";
 import { signIn } from "@/lib/auth-client";
 import Link from "next/link";
@@ -22,7 +22,7 @@ import { useRouter } from "next/navigation";
 export default function SignIn() {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
-	const [loading, setLoading] = useState(false);
+	const [loading, startTransition] = useTransition();
 	const [rememberMe, setRememberMe] = useState(false);
 	const router = useRouter();
 
@@ -83,16 +83,16 @@ export default function SignIn() {
 						className="w-full"
 						disabled={loading}
 						onClick={async () => {
-							setLoading(true);
+							startTransition(async () => {
 								await signIn.email(
-								{ email, password, rememberMe: rememberMe ? true : false },
+									{ email, password, rememberMe },
 									{
 										onSuccess(context) {
 											router.push("/dashboard");
 										},
 									},
 								);
-							setLoading(false);
+							});
 						}}
 					>
 						{loading ? <Loader2 size={16} className="animate-spin" /> : "Login"}

docs/app/docs/[[...slug]]/page.client.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState } from "react";
+import { useState, useTransition } from "react";
 import {
 	Check,
 	Copy,
@@ -50,11 +50,10 @@ export function useCopyButton(
 const cache = new Map<string, string>();
 
 export function LLMCopyButton() {
-	const [isLoading, setLoading] = useState(false);
+	const [isLoading, startTransition] = useTransition();
 	const [checked, onClick] = useCopyButton(async () => {
-		setLoading(true);
+		startTransition(async () => {
 			const url = window.location.pathname + ".mdx";
-		try {
 			const cached = cache.get(url);
 
 			if (cached) {
@@ -71,9 +70,7 @@ export function LLMCopyButton() {
 					}),
 				]);
 			}
-		} finally {
+		});
-			setLoading(false);
-		}
 	});
 
 	return (

docs/components/generate-apple-jwt.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useState } from "react";
+import { useState, useTransition } from "react";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
 import { KJUR } from "jsrsasign";
@@ -43,7 +43,7 @@ type AppleJwtFormValues = z.infer<typeof appleJwtSchema>;
 export const GenerateAppleJwt = () => {
 	const [generatedJwt, setGeneratedJwt] = useState<string | null>(null);
 	const [error, setError] = useState<string | null>(null);
-	const [isLoading, setIsLoading] = useState(false);
+	const [isLoading, startTransition] = useTransition();
 
 	const form = useForm<AppleJwtFormValues>({
 		resolver: zodResolver(appleJwtSchema),
@@ -56,10 +56,9 @@ export const GenerateAppleJwt = () => {
 	});
 
 	const onSubmit = async (data: AppleJwtFormValues) => {
-		setIsLoading(true);
 		setGeneratedJwt(null);
 		setError(null);
-
+		startTransition(() => {
 			try {
 				//normalize the private key by replacing \r\n with \n and trimming whitespace just incase lol
 				const normalizedKey = data.privateKey.replace(/\r\n/g, "\n").trim();
@@ -86,7 +85,12 @@ export const GenerateAppleJwt = () => {
 				const sHeader = JSON.stringify(header);
 				const sPayload = JSON.stringify(payload);
 
-			const jwt = KJUR.jws.JWS.sign("ES256", sHeader, sPayload, normalizedKey);
+				const jwt = KJUR.jws.JWS.sign(
+					"ES256",
+					sHeader,
+					sPayload,
+					normalizedKey,
+				);
 				setGeneratedJwt(jwt);
 			} catch (err: any) {
 				console.error("JWT Generation Error:", err);
@@ -95,9 +99,8 @@ export const GenerateAppleJwt = () => {
 						err.message || "Unknown error"
 					}. Check key format and details.`,
 				);
-		} finally {
-			setIsLoading(false);
 			}
+		});
 	};
 
 	const copyToClipboard = () => {