From 038370012fb13cc3f8180d0a1f26d64fe7743d01 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Wed, 27 Mar 2024 14:10:29 +0800
Subject: [PATCH] fix: render fields on document load (#1054)

## Description

Currently if you try to load the document edit page when fields need to
be rendered, you will not be able to see the fields until you proceed to
the next step.

This is because the fields require the document PDF to be loaded prior
to rendering them.

This PR resolves that issue by only rendering the fields after the PDF
is loaded.

## Changes Made

- Add a state to track whether the PDF is loaded
- Render the fields only after the PDF is loaded

## Testing Performed

Tested document flow manually and the fields are rendered correctly on
load.

## Checklist

- [X] I have tested these changes locally and they work as expected.
- [X] I have updated the documentation to reflect these changes, if
applicable.
---
 .../app/(marketing)/singleplayer/client.tsx   |  1 +
 .../documents/[id]/edit-document.tsx          |  8 ++++-
 .../primitives/document-flow/add-fields.tsx   | 29 ++++++++++---------
 .../primitives/document-flow/add-signers.tsx  |  9 ++++--
 .../primitives/document-flow/add-subject.tsx  |  9 ++++--
 .../ui/primitives/document-flow/add-title.tsx |  9 ++++--
 6 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/apps/marketing/src/app/(marketing)/singleplayer/client.tsx b/apps/marketing/src/app/(marketing)/singleplayer/client.tsx
index a8e0a0c63..48b967de8 100644
--- a/apps/marketing/src/app/(marketing)/singleplayer/client.tsx
+++ b/apps/marketing/src/app/(marketing)/singleplayer/client.tsx
@@ -246,6 +246,7 @@ export const SinglePlayerClient = () => {
                   recipients={uploadedFile ? [placeholderRecipient] : []}
                   fields={fields}
                   onSubmit={onFieldsSubmit}
+                  isDocumentPdfLoaded={true}
                 />
               </fieldset>
 
diff --git a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
index 9b051bbad..90f605602 100644
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
@@ -49,6 +49,8 @@ export const EditDocumentForm = ({
   const searchParams = useSearchParams();
   const team = useOptionalCurrentTeam();
 
+  const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
+
   const utils = trpc.useUtils();
 
   const { data: document, refetch: refetchDocument } =
@@ -294,6 +296,7 @@ export const EditDocumentForm = ({
             document={document}
             password={document.documentMeta?.password}
             onPasswordSubmit={onPasswordSubmit}
+            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>
       </Card>
@@ -314,8 +317,8 @@ export const EditDocumentForm = ({
               recipients={recipients}
               fields={fields}
               onSubmit={onAddTitleFormSubmit}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
-
             <AddSignersFormPartial
               key={recipients.length}
               documentFlow={documentFlow.signers}
@@ -323,6 +326,7 @@ export const EditDocumentForm = ({
               recipients={recipients}
               fields={fields}
               onSubmit={onAddSignersFormSubmit}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
             <AddFieldsFormPartial
               key={fields.length}
@@ -330,6 +334,7 @@ export const EditDocumentForm = ({
               recipients={recipients}
               fields={fields}
               onSubmit={onAddFieldsFormSubmit}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
             <AddSubjectFormPartial
               key={recipients.length}
@@ -338,6 +343,7 @@ export const EditDocumentForm = ({
               recipients={recipients}
               fields={fields}
               onSubmit={onAddSubjectFormSubmit}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
           </Stepper>
         </DocumentFlowFormContainer>
diff --git a/packages/ui/primitives/document-flow/add-fields.tsx b/packages/ui/primitives/document-flow/add-fields.tsx
index c4f58b83c..3031d6479 100644
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@@ -53,6 +53,7 @@ export type AddFieldsFormProps = {
   recipients: Recipient[];
   fields: Field[];
   onSubmit: (_data: TAddFieldsFormSchema) => void;
+  isDocumentPdfLoaded: boolean;
 };
 
 export const AddFieldsFormPartial = ({
@@ -61,6 +62,7 @@ export const AddFieldsFormPartial = ({
   recipients,
   fields,
   onSubmit,
+  isDocumentPdfLoaded,
 }: AddFieldsFormProps) => {
   const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
   const { currentStep, totalSteps, previousStep } = useStep();
@@ -342,19 +344,20 @@ export const AddFieldsFormPartial = ({
             </Card>
           )}
 
-          {localFields.map((field, index) => (
-            <FieldItem
-              key={index}
-              field={field}
-              disabled={selectedSigner?.email !== field.signerEmail || hasSelectedSignerBeenSent}
-              minHeight={fieldBounds.current.height}
-              minWidth={fieldBounds.current.width}
-              passive={isFieldWithinBounds && !!selectedField}
-              onResize={(options) => onFieldResize(options, index)}
-              onMove={(options) => onFieldMove(options, index)}
-              onRemove={() => remove(index)}
-            />
-          ))}
+          {isDocumentPdfLoaded &&
+            localFields.map((field, index) => (
+              <FieldItem
+                key={index}
+                field={field}
+                disabled={selectedSigner?.email !== field.signerEmail || hasSelectedSignerBeenSent}
+                minHeight={fieldBounds.current.height}
+                minWidth={fieldBounds.current.width}
+                passive={isFieldWithinBounds && !!selectedField}
+                onResize={(options) => onFieldResize(options, index)}
+                onMove={(options) => onFieldMove(options, index)}
+                onRemove={() => remove(index)}
+              />
+            ))}
 
           {!hideRecipients && (
             <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
diff --git a/packages/ui/primitives/document-flow/add-signers.tsx b/packages/ui/primitives/document-flow/add-signers.tsx
index 8792af2a8..95f2c7983 100644
--- a/packages/ui/primitives/document-flow/add-signers.tsx
+++ b/packages/ui/primitives/document-flow/add-signers.tsx
@@ -39,6 +39,7 @@ export type AddSignersFormProps = {
   fields: Field[];
   document: DocumentWithData;
   onSubmit: (_data: TAddSignersFormSchema) => void;
+  isDocumentPdfLoaded: boolean;
 };
 
 export const AddSignersFormPartial = ({
@@ -47,6 +48,7 @@ export const AddSignersFormPartial = ({
   document,
   fields,
   onSubmit,
+  isDocumentPdfLoaded,
 }: AddSignersFormProps) => {
   const { toast } = useToast();
   const { remaining } = useLimits();
@@ -145,9 +147,10 @@ export const AddSignersFormPartial = ({
       />
       <DocumentFlowFormContainerContent>
         <div className="flex w-full flex-col gap-y-4">
-          {fields.map((field, index) => (
-            <ShowFieldItem key={index} field={field} recipients={recipients} />
-          ))}
+          {isDocumentPdfLoaded &&
+            fields.map((field, index) => (
+              <ShowFieldItem key={index} field={field} recipients={recipients} />
+            ))}
 
           <AnimatePresence>
             {signers.map((signer, index) => (
diff --git a/packages/ui/primitives/document-flow/add-subject.tsx b/packages/ui/primitives/document-flow/add-subject.tsx
index aa0bc148f..3f9cbe798 100644
--- a/packages/ui/primitives/document-flow/add-subject.tsx
+++ b/packages/ui/primitives/document-flow/add-subject.tsx
@@ -50,6 +50,7 @@ export type AddSubjectFormProps = {
   fields: Field[];
   document: DocumentWithData;
   onSubmit: (_data: TAddSubjectFormSchema) => void;
+  isDocumentPdfLoaded: boolean;
 };
 
 export const AddSubjectFormPartial = ({
@@ -58,6 +59,7 @@ export const AddSubjectFormPartial = ({
   fields: fields,
   document,
   onSubmit,
+  isDocumentPdfLoaded,
 }: AddSubjectFormProps) => {
   const {
     control,
@@ -103,9 +105,10 @@ export const AddSubjectFormPartial = ({
       />
       <DocumentFlowFormContainerContent>
         <div className="flex flex-col">
-          {fields.map((field, index) => (
-            <ShowFieldItem key={index} field={field} recipients={recipients} />
-          ))}
+          {isDocumentPdfLoaded &&
+            fields.map((field, index) => (
+              <ShowFieldItem key={index} field={field} recipients={recipients} />
+            ))}
 
           <div className="flex flex-col gap-y-4">
             <div>
diff --git a/packages/ui/primitives/document-flow/add-title.tsx b/packages/ui/primitives/document-flow/add-title.tsx
index a6390fd3a..5abe44003 100644
--- a/packages/ui/primitives/document-flow/add-title.tsx
+++ b/packages/ui/primitives/document-flow/add-title.tsx
@@ -28,6 +28,7 @@ export type AddTitleFormProps = {
   fields: Field[];
   document: DocumentWithData;
   onSubmit: (_data: TAddTitleFormSchema) => void;
+  isDocumentPdfLoaded: boolean;
 };
 
 export const AddTitleFormPartial = ({
@@ -36,6 +37,7 @@ export const AddTitleFormPartial = ({
   fields,
   document,
   onSubmit,
+  isDocumentPdfLoaded,
 }: AddTitleFormProps) => {
   const {
     register,
@@ -59,9 +61,10 @@ export const AddTitleFormPartial = ({
         description={documentFlow.description}
       />
       <DocumentFlowFormContainerContent>
-        {fields.map((field, index) => (
-          <ShowFieldItem key={index} field={field} recipients={recipients} />
-        ))}
+        {isDocumentPdfLoaded &&
+          fields.map((field, index) => (
+            <ShowFieldItem key={index} field={field} recipients={recipients} />
+          ))}
 
         <div className="flex flex-col">
           <div className="flex flex-col gap-y-4">