fix(showcase/shell-docs): CopyButton clears pending reset timer on unmount

Author: jpr5

showcase/shell-docs/src/components/copy-button.tsx

@@ -3,12 +3,23 @@
 
 "use client";
 
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 type CopyState = "idle" | "copied" | "error";
 
 export function CopyButton({ text }: { text: string }) {
   const [state, setState] = useState<CopyState>("idle");
+  // Track the pending reset timer so we can clear it on unmount (avoids the
+  // React 18 "state update on an unmounted component" warning) and also
+  // overwrite a stale timer when the user clicks again before it fires.
+  const resetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (resetTimerRef.current) clearTimeout(resetTimerRef.current);
+    },
+    [],
+  );
 
   const copied = state === "copied";
   const error = state === "error";
@@ -23,17 +34,23 @@ export function CopyButton({ text }: { text: string }) {
       type="button"
       onClick={async (e) => {
         e.preventDefault();
+        // Clear any in-flight reset from a previous click so rapid-fire copies
+        // don't race each other and flip the label back early.
+        if (resetTimerRef.current) {
+          clearTimeout(resetTimerRef.current);
+          resetTimerRef.current = null;
+        }
         try {
           await navigator.clipboard.writeText(text);
           setState("copied");
-          setTimeout(() => setState("idle"), 1500);
+          resetTimerRef.current = setTimeout(() => setState("idle"), 1500);
         } catch (err) {
           // Clipboard blocked (permissions, insecure context, etc.) — surface
           // the failure to the user so they know the button didn't work, and
           // log enough for devs to debug rather than silently swallowing.
           console.warn("[copy-button] clipboard write failed", err);
           setState("error");
-          setTimeout(() => setState("idle"), 2000);
+          resetTimerRef.current = setTimeout(() => setState("idle"), 2000);
         }
       }}
       aria-label={label}