Fixes #5850 performance issue request body editor

[wmccusker]

Delay setting content from request body into the global state until the text area loses focus otherwise the entire ui will render on every key press causing significant user pain when trying to enter values.

Description

Moved the global state changing call from the "onChange" event to the "onBlur" event for the textarea. This has the effect that the full state change does not take affect until the user clicks outside the text area, for example on the execute button to send the payload.

I do have a concerned that the "onBlur" event might trigger to late in some cases but I don't have enough experience or knowledge to say that for sure. I have not been able to find any issues during manual testing.

Motivation and Context

Fixes #5850
#5850

For large OpenAPI 3 documents the full render of all operations can be very expensive and slows down the users input so the visual input can lag very far behind what the user is typing. This makes it difficult to use the ui to edit and test sample payloads.

How Has This Been Tested?

This has been manually tested in Safari and Chrome on multiple machines. The testing involved typing into the request body payload and then clicking "execute" to verify that what was typed was used for the request payload that was sent.

This should only affect OpenAPI 3 request body editing and sending.

Checklist

My PR contains...

• No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
• Dependency changes (any modification to dependencies in package.json)
• Bug fixes (non-breaking change which fixes an issue)
• Improvements (misc. changes to existing features)
• Features (non-breaking change which adds functionality)

My changes...

• are breaking changes to a public API (config options, System API, major UI change, etc).
• are breaking changes to a private API (Redux, component props, utility functions, etc.).
• are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
• are not breaking changes.

Documentation

• My changes do not require a change to the project documentation.
• My changes require a change to the project documentation.
• If yes to above: I have updated the documentation accordingly.

Automated tests

• My changes can not or do not need to be tested.
• My changes can and should be tested by unit and/or integration tests.
• If yes to above: I have added tests to cover my changes.
• If yes to above: I have taken care to cover edge cases in my tests.
• All new and existing tests passed.

[tim-lai]

@wmccusker Thanks for the PR! However, this PR fails to pass existing tests.

[tim-lai]

@wmccusker Thanks for the PR! However, this PR fails to pass existing tests. It would also be helpful to include additional tests that would have demonstrated resolution of issue.

[orck-adrouin]

Is this PR planned to be approved soon?

I am migrating an app that uses the old Swagger-ui 1.x to the latest version (3.31.0) and my 1.5MB JSON file is making the body editor lag as described in this issue.

[tim-lai]

@orck-adrouin Per earlier comment to original author, this PR fails CI tests. Open to original or additional contributors to fix proposed solution, or come up with better alternative. ;)

[orck-adrouin]

@tim-lai I'll try to tackle this issue by wrapping the textarea in react-debounce-input. I noticed that react-debounce-input was used elsewhere in Swagger-UI. Do you think this solution would be acceptable?

[orck-adrouin]

I spent a few hours trying to fix it without luck so I'll leave this issue to someone more familiar with React and Swagger-UI.

[tim-lai]

@orck-adrouin Thanks for your effort and time! We appreciate it. Sorry to hear it didn't come together quickly or easily.