fix(ui): awaits form state before rendering conditional fields (#9933)

When a condition exists on a field and it resolves to `false`, it
currently "blinks" in and out when rendered within an array or block
row. This is because when add rows to form state, we iterate over the
_fields_ of that row and render their respective components. Then when
conditions are checked for that field, we're expecting `passesCondition`
to be explicitly `false`, ultimately _rendering_ the field for a brief
moment before form state returns with evaluated conditions. The fix is
to set these fields into local form state with a new `isLoading: true`
prop, then display a loader within the row until form state returns with
its proper conditions.

packages/ui/src/forms/Form/fieldReducer.ts

@@ -29,6 +29,7 @@ export function fieldReducer(state: FormState, action: FieldAction): FormState {
         id: (subFieldState?.id?.value as string) || new ObjectId().toHexString(),
         blockType: blockType || undefined,
         collapsed: false,
+        isLoading: true,
       }
 
       withNewRow.splice(rowIndex, 0, newRow)
@@ -43,6 +44,7 @@ export function fieldReducer(state: FormState, action: FieldAction): FormState {
 
       // add new row to array _field state_
       const { remainingFields, rows: siblingRows } = separateRows(path, state)
+
       siblingRows.splice(rowIndex, 0, subFieldState)
 
       const newState: FormState = {