danabra.mov
an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
1"use client";
2
3import { useTransition } from "react";
4import "./TextButton.css";
5
6type Props = {
7 action: () => Promise<void> | void;
8 children: string;
9 pendingChildren: string;
10};
11
12export function TextButton({ action, children, pendingChildren }: Props) {
13 const [isPending, startTransition] = useTransition();
14
15 const handleClick = (e: React.MouseEvent) => {
16 if (isPending) return;
17 e.stopPropagation();
18 startTransition(async () => {
19 await action();
20 });
21 };
22
23 return (
24 <button type="button" onClick={handleClick} disabled={isPending} className="TextButton">
25 <span className={isPending ? "TextButton--pending" : undefined}>
26 {isPending ? pendingChildren : children}
27 </span>
28 </button>
29 );
30}