Fix playground Share button showing "Copied!" before clipboard copy completes

playground/ruff/src/Editor/Chrome.tsx

@@ -16,15 +16,11 @@ export default function Chrome() {
 
   const [theme, setTheme] = useTheme();
 
-  const handleShare = useCallback(() => {
+  const handleShare = useCallback(async () => {
     if (settings == null || pythonSource == null) {
       return;
     }
-
-    persist(settings, pythonSource).catch((error) =>
-      // eslint-disable-next-line no-console
-      console.error(`Failed to share playground: ${error}`),
-    );
+    await persist(settings, pythonSource);
   }, [pythonSource, settings]);
 
   if (initPromise.current == null) {

playground/shared/src/Header.tsx

@@ -21,7 +21,7 @@ export default function Header({
   version: string | null;
   onChangeTheme: (theme: Theme) => void;
   onReset?(): void;
-  onShare: () => void;
+  onShare: () => Promise<void>;
 }) {
   return (
     <div

playground/shared/src/ShareButton.tsx

@@ -1,17 +1,23 @@
 import { useEffect, useState } from "react";
 import AstralButton from "./AstralButton";
 
-export default function ShareButton({ onShare }: { onShare: () => void }) {
-  const [copied, setCopied] = useState(false);
+type ShareStatus = "initial" | "copying" | "copied";
+
+export default function ShareButton({
+  onShare,
+}: {
+  onShare: () => Promise<void>;
+}) {
+  const [status, setStatus] = useState<ShareStatus>("initial");
 
   useEffect(() => {
-    if (copied) {
-      const timeout = setTimeout(() => setCopied(false), 2000);
+    if (status === "copied") {
+      const timeout = setTimeout(() => setStatus("initial"), 2000);
       return () => clearTimeout(timeout);
     }
-  }, [copied]);
+  }, [status]);
 
-  return copied ? (
+  return status === "copied" ? (
     <AstralButton
       type="button"
       className="relative flex-none leading-6 py-1.5 px-3 cursor-auto dark:shadow-copied"
@@ -28,10 +34,17 @@ export default function ShareButton({ onShare }: { onShare: () => void }) {
     <AstralButton
       type="button"
       className="relative flex-none leading-6 py-1.5 px-3 shadow-xs disabled:opacity-50"
-      disabled={copied}
-      onClick={() => {
-        setCopied(true);
-        onShare();
+      disabled={status === "copying"}
+      onClick={async () => {
+        setStatus("copying");
+        try {
+          await onShare();
+          setStatus("copied");
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error("Failed to share playground", error);
+          setStatus("initial");
+        }
       }}
     >
       <span

playground/ty/src/Playground.tsx

@@ -48,14 +48,11 @@ export default function Playground() {
 
   usePersistLocally(files);
 
-  const handleShare = useCallback(() => {
+  const handleShare = useCallback(async () => {
     const serialized = serializeFiles(files);
 
     if (serialized != null) {
-      persist(serialized).catch((error) => {
-        // eslint-disable-next-line no-console
-        console.error("Failed to share playground", error);
-      });
+      await persist(serialized);
     }
   }, [files]);