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.

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>
 

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>

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,7 +344,8 @@ export const AddFieldsFormPartial = ({
             </Card>
           )}
 
-          {localFields.map((field, index) => (
+          {isDocumentPdfLoaded &&
+            localFields.map((field, index) => (
               <FieldItem
                 key={index}
                 field={field}

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,7 +147,8 @@ export const AddSignersFormPartial = ({
       />
       <DocumentFlowFormContainerContent>
         <div className="flex w-full flex-col gap-y-4">
-          {fields.map((field, index) => (
+          {isDocumentPdfLoaded &&
+            fields.map((field, index) => (
               <ShowFieldItem key={index} field={field} recipients={recipients} />
             ))}
 

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,7 +105,8 @@ export const AddSubjectFormPartial = ({
       />
       <DocumentFlowFormContainerContent>
         <div className="flex flex-col">
-          {fields.map((field, index) => (
+          {isDocumentPdfLoaded &&
+            fields.map((field, index) => (
               <ShowFieldItem key={index} field={field} recipients={recipients} />
             ))}
 

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,7 +61,8 @@ export const AddTitleFormPartial = ({
         description={documentFlow.description}
       />
       <DocumentFlowFormContainerContent>
-        {fields.map((field, index) => (
+        {isDocumentPdfLoaded &&
+          fields.map((field, index) => (
             <ShowFieldItem key={index} field={field} recipients={recipients} />
           ))}