fix(VE-5555): add instance button loading state#406
Merged
faraazb merged 3 commits intodevelop_v3from Mar 24, 2025
Merged
Conversation
Adding a reference instance is an async operation on visual builder side. Use a loading state to disable the button, so that the add instance message cannot be sent when it is already sent and a response is being awaited
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR adds a loading state to the instance-adding button in the visual builder, preventing duplicate messages during asynchronous operations. Key changes include:
- Updating AddInstanceButtonComponent to manage a loading signal and disable the button during async operations.
- Modifying generateAddInstanceButton to pass required props (loading, index, fieldMetadata) to the component.
- Adding visual feedback for the loading state via new CSS classes.
- Introducing a shared loading signal for multiple add buttons in multipleElementAddButton.ts.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/visualBuilder/components/addInstanceButton.tsx | Updated to include async handling with a loading state and revised disabled logic. |
| src/visualBuilder/generators/generateAddInstanceButtons.tsx | Adjusted to forward additional props (loading, fieldMetadata, index) to the button component. |
| src/visualBuilder/visualBuilder.style.ts | Added CSS for a loading state to provide user feedback. |
| src/visualBuilder/utils/multipleElementAddButton.ts | Implemented a shared loading signal for coordinating multiple add buttons. |
Comments suppressed due to low confidence (1)
src/visualBuilder/components/addInstanceButton.tsx:29
- [nitpick] Consider renaming the inner onClick function (e.g., handleButtonClick) to clearly differentiate it from the props.onClick callback.
const onClick = async (event: MouseEvent) => {
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a loading state for the add instance button to prevent multiple async submissions while waiting for a response. Key changes include:
- Updating the add instance button component to disable the button during async operations.
- Adjusting tests across generators, components, and utilities to handle the new loading prop.
- Adding new loading-specific styling to visually indicate the button’s state.
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/visualBuilder/generators/test/generateAddInstanceButtons.test.tsx | Updated tests to include fieldMetadata and loading props for add instance button generation. |
| src/visualBuilder/components/addInstanceButton.tsx | Refactored the component to set a loading state during async postMessage sending and adjusted the disabled logic. |
| src/visualBuilder/generators/generateAddInstanceButtons.tsx | Modified the props order and added loading and fieldMetadata to the component invocation. |
| src/visualBuilder/visualBuilder.style.ts | Added styles for the loading state of the add instance button. |
| src/visualBuilder/utils/test/multipleElementAddButton.test.ts | Updated tests to include loading state handling with signals. |
| src/visualBuilder/utils/multipleElementAddButton.ts | Introduced a shared loading signal for managing add instance button states. |
| src/visualBuilder/components/test/addInstanceButton.test.tsx | Enhanced tests to verify that the component sends the add-instance message and calls the onClick callback. |
Comments suppressed due to low confidence (2)
src/visualBuilder/components/addInstanceButton.tsx:29
- [nitpick] The internal function 'onClick' shadows the prop 'onClick'. Consider renaming it to 'handleClick' to improve clarity.
const onClick = async (event: MouseEvent) => {
src/visualBuilder/components/test/addInstanceButton.test.tsx:58
- [nitpick] Consider extending this test to verify that the loading state is set to true before the async operation and reset to false afterward.
test("sends add-instance message when clicked", async () => {
Contributor
Author
|
We can ignore the failing tests, they are being removed in another PR. |
hiteshshetty-dev
approved these changes
Mar 21, 2025
Contributor
hiteshshetty-dev
left a comment
hiteshshetty-dev
left a comment
There was a problem hiding this comment.
Changes looks good to me!! Let's test it once on DotNET project as signal might have some impact here.
This file contains hidden or 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
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.
Adding a reference instance is an async operation on visual builder side. Use a loading state to disable the button, so that the add instance message cannot be sent when it is already sent and a response is being awaited.