Skip to content

Commit 9334a18

Browse files
fix: add loading spinner and fixed width to Copy Prompt button
Prevents layout shift on click and gives immediate visual feedback while the bootstrap prompt is being fetched.
1 parent 4542e8d commit 9334a18

1 file changed

Lines changed: 10 additions & 6 deletions

File tree

src/components/home/hero-section.tsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { ReactNode } from "react";
22
import { useCallback, useRef, useState } from "react";
3-
import { Check } from "lucide-react";
3+
import { Check, LoaderCircle } from "lucide-react";
44
import { Button } from "@/components/ui/button";
55
import { CopyButton } from "@/components/code/copy-button";
66
import { getBootstrapPromptApiPath } from "@/lib/bootstrap-prompt";
@@ -60,12 +60,13 @@ async function getBootstrapPrompt(): Promise<string> {
6060
}
6161

6262
export function HeroSection(): ReactNode {
63-
const [copyState, setCopyState] = useState<"idle" | "copied" | "error">(
64-
"idle",
65-
);
63+
const [copyState, setCopyState] = useState<
64+
"idle" | "copying" | "copied" | "error"
65+
>("idle");
6666
const resetTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
6767

6868
const handleCopyBootstrapPrompt = useCallback(async () => {
69+
setCopyState("copying");
6970
try {
7071
const bootstrapPrompt = await getBootstrapPrompt();
7172
const copied = await copyTextToClipboard(bootstrapPrompt);
@@ -108,11 +109,14 @@ export function HeroSection(): ReactNode {
108109
</div>
109110
<span className="text-sm text-black/35 dark:text-white/35">or</span>
110111
<Button
111-
className="h-11 rounded-full px-6 font-medium"
112+
className="h-11 w-40 rounded-full px-6 font-medium"
112113
onClick={handleCopyBootstrapPrompt}
114+
disabled={copyState === "copying"}
113115
title="Copies a setup guide you can paste into Cursor, Claude Code, or Codex"
114116
>
115-
{copyState === "copied" ? (
117+
{copyState === "copying" ? (
118+
<LoaderCircle className="h-4 w-4 animate-spin" />
119+
) : copyState === "copied" ? (
116120
<span className="inline-flex items-center gap-1.5">
117121
<Check className="h-4 w-4" />
118122
Copied

0 commit comments

Comments
 (0)