From 073a050587d2056d2b0a334483c47b552b143519 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Sat, 2 Dec 2023 11:09:42 +1100
Subject: [PATCH] fix: signature field race conditions

---
 .../app/(signing)/sign/[token]/signature-field.tsx   | 12 +++++++++---
 .../avatar/stack-avatars-with-tooltip.tsx            | 10 +---------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx b/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx
index 01923bd6c..ec3e45fe5 100644
--- a/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx
@@ -6,8 +6,8 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import { Recipient } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
@@ -76,10 +76,16 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
         return;
       }
 
+      const value = source === 'local' && localSignature ? localSignature : providedSignature ?? '';
+
+      if (!value) {
+        return;
+      }
+
       await signFieldWithToken({
         token: recipient.token,
         fieldId: field.id,
-        value: source === 'local' && localSignature ? localSignature : providedSignature ?? '',
+        value,
         isBase64: true,
       });
 
diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx
index 333cc6134..7429d8ee5 100644
--- a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx
+++ b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx
@@ -69,15 +69,7 @@ export const StackAvatarsWithTooltip = ({
               <div>
                 <h1 className="text-base font-medium">Waiting</h1>
                 {waitingRecipients.map((recipient: Recipient) => (
-                  <div key={recipient.id} className="my-1 flex items-center gap-2">
-                    <StackAvatar
-                      first={true}
-                      key={recipient.id}
-                      type={getRecipientType(recipient)}
-                      fallbackText={recipientAbbreviation(recipient)}
-                    />
-                    <span className="text-muted-foreground text-sm">{recipient.email}</span>
-                  </div>
+                  <AvatarWithRecipient key={recipient.id} recipient={recipient} />
                 ))}
               </div>
             )}