enhance: add dynamic import for stack trace decoding in error boundary.

components/error-boundary.js

@@ -1,11 +1,11 @@
-import { Component } from 'react'
+import { Component, useState } from 'react'
 import { StaticLayout } from './layout'
 import styles from '@/styles/error.module.css'
 import Image from 'react-bootstrap/Image'
 import copy from 'clipboard-copy'
 import Button from 'react-bootstrap/Button'
 import { useToast } from './toast'
-import { decodeMinifiedStackTrace } from '@/lib/stacktrace'
+
 class ErrorBoundary extends Component {
   constructor (props) {
     super(props)
@@ -61,16 +61,25 @@ export default ErrorBoundary
 // This button is a functional component so we can use `useToast` hook, which
 // can't be easily done in a class component that already consumes a context
 const CopyErrorButton = ({ errorDetails }) => {
+  const [copying, setCopying] = useState(false)
   const toaster = useToast()
   const onClick = async () => {
+    setCopying(true)
     try {
+      const { decodeMinifiedStackTrace } = await import('@/lib/stacktrace')
       const decodedDetails = await decodeMinifiedStackTrace(errorDetails)
       await copy(decodedDetails)
       toaster?.success?.('copied')
     } catch (err) {
       console.error(err)
       toaster?.danger?.('failed to copy')
+    } finally {
+      setCopying(false)
     }
   }
-  return <Button className='mt-3' onClick={onClick}>copy error information</Button>
+  return (
+    <Button className='mt-3' onClick={onClick} disabled={copying}>
+      {copying ? 'copying...' : 'copy error information'}
+    </Button>
+  )
 }