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

* fix: use `useTransition` for isLoading

* fixup! fix: use `useTransition` for isLoading
This commit is contained in:
Alex Yang
2025-08-04 11:11:20 -07:00
committed by Bereket Engida
parent f49a2fbf99
commit 3ee67fcca0
5 changed files with 95 additions and 95 deletions

View File

@@ -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,48 +56,51 @@ 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();
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();
//since jose is not working with safari, we are using jsrsasign
//since jose is not working with safari, we are using jsrsasign
const header = {
alg: "ES256",
kid: data.keyId,
typ: "JWT",
};
const header = {
alg: "ES256",
kid: data.keyId,
typ: "JWT",
};
const issuedAtSeconds = Math.floor(Date.now() / 1000);
const expirationSeconds = issuedAtSeconds + 180 * 24 * 60 * 60; // 180 days. Should we let the user choose this ? MAX is 6 months
const issuedAtSeconds = Math.floor(Date.now() / 1000);
const expirationSeconds = issuedAtSeconds + 180 * 24 * 60 * 60; // 180 days. Should we let the user choose this ? MAX is 6 months
const payload = {
iss: data.teamId, // Issuer (Team ID)
aud: "https://appleid.apple.com", // Audience
sub: data.clientId, // Subject (Client ID -> Service ID)
iat: issuedAtSeconds, // Issued At timestamp
exp: expirationSeconds, // Expiration timestamp
};
const payload = {
iss: data.teamId, // Issuer (Team ID)
aud: "https://appleid.apple.com", // Audience
sub: data.clientId, // Subject (Client ID -> Service ID)
iat: issuedAtSeconds, // Issued At timestamp
exp: expirationSeconds, // Expiration timestamp
};
const sHeader = JSON.stringify(header);
const sPayload = JSON.stringify(payload);
const sHeader = JSON.stringify(header);
const sPayload = JSON.stringify(payload);
const jwt = KJUR.jws.JWS.sign("ES256", sHeader, sPayload, normalizedKey);
setGeneratedJwt(jwt);
} catch (err: any) {
console.error("JWT Generation Error:", err);
setError(
`Failed to generate JWT: ${
err.message || "Unknown error"
}. Check key format and details.`,
);
} finally {
setIsLoading(false);
}
const jwt = KJUR.jws.JWS.sign(
"ES256",
sHeader,
sPayload,
normalizedKey,
);
setGeneratedJwt(jwt);
} catch (err: any) {
console.error("JWT Generation Error:", err);
setError(
`Failed to generate JWT: ${
err.message || "Unknown error"
}. Check key format and details.`,
);
}
});
};
const copyToClipboard = () => {