fix: resolve issues with open graph asset loading

apps/web/src/app/(signing)/sign/[token]/complete/share-button.tsx

@@ -2,12 +2,13 @@
 
 import { HTMLAttributes } from 'react';
 
-import { useRouter } from 'next/navigation';
-
 import { Share } from 'lucide-react';
 
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
 
 export type ShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
   token: string;
@@ -15,29 +16,35 @@ export type ShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
 };
 
 export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
+  const { toast } = useToast();
+  const [, copyToClipboard] = useCopyToClipboard();
+
   const { mutateAsync: createOrGetShareLink, isLoading } =
     trpc.shareLink.createOrGetShareLink.useMutation();
 
-  const router = useRouter();
+  const onShareClick = async () => {
+    const { slug } = await createOrGetShareLink({
+      token: token,
+      documentId,
+    });
+
+    await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null);
+
+    toast({
+      title: 'Copied to clipboard',
+      description: 'The sharing link has been copied to your clipboard.',
+    });
+  };
 
   return (
     <Button
       variant="outline"
       className="flex-1"
-      disabled={!token || !documentId || isLoading}
-      onClick={async () => {
-        console.log('Signing Clicked');
-
-        const { slug } = await createOrGetShareLink({
-          token,
-          documentId,
-        });
-
-        // TODO: Router delaying...
-        return router.push(`/share/${slug}`);
-      }}
+      disabled={!token || !documentId}
+      loading={isLoading}
+      onClick={onShareClick}
     >
-      <Share className="mr-2 h-5 w-5" />
+      {!isLoading && <Share className="mr-2 h-5 w-5" />}
       Share
     </Button>
   );