Don't load response when blocking large responses

src-web/components/CopyButton.tsx

@@ -1,10 +1,11 @@
 import { useCopy } from '../hooks/useCopy';
 import { useTimedBoolean } from '../hooks/useTimedBoolean';
+import { showToast } from '../lib/toast';
 import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
 
-interface Props extends ButtonProps {
-  text: string;
+interface Props extends Omit<ButtonProps, 'onClick'> {
+  text: string | (() => Promise<string | null>);
 }
 
 export function CopyButton({ text, ...props }: Props) {
@@ -13,9 +14,18 @@ export function CopyButton({ text, ...props }: Props) {
   return (
     <Button
       {...props}
-      onClick={() => {
-        copy(text);
-        setCopied();
+      onClick={async () => {
+        const content = typeof text === 'function' ? await text() : text;
+        if (content == null) {
+          showToast({
+            id: 'failed-to-copy',
+            color: 'danger',
+            message: 'Failed to copy',
+          });
+        } else {
+            copy(content);
+            setCopied();
+        }
       }}
     >
       {copied ? 'Copied' : 'Copy'}