fix(ui): awaits form state before rendering conditional fields #9933
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jacobsfletch
changed the title
|
🚀 This is included in version v3.7.0 |
jacobsfletch
added a commit
that referenced
this pull request
Dec 16, 2024
Extension of #9933. Custom components are returned by form state, meaning that if we don't wait for form state to return before rendering row labels, the default row label component will render in briefly before being swapped by a custom component (if applicable). Using the new `isLoading` prop on array and block rows, we can conditionally render them just as we currently do for the row fields themselves.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 expectingpassesConditionto be explicitlyfalse, 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 newisLoading: trueprop, then display a loader within the row until form state returns with its proper conditions.