fix: Add debounce to textarea component to improve performance

[orck-adrouin]

Description

Wrap the textarea component with DebounceInput to improve performance when modifying text in the body of a request

Motivation and Context

My project has 500+ requests and typing in the body is slow because changing the body re-render everything on the page.
A PR (#5882) was created a few years ago to correct issue #5850 however it was abandoned.

Fixes #5850

How Has This Been Tested?

Manual testing and ran all tests.

I had to modify a few tests to call blur() on the body to force the debounce to trigger. I would have expected the tests to work without having to call blur() however I don't know enough about Cypress to know if this is normal.

Screenshots (if appropriate):

N/A

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.

[char0n]

Hi,

Thank you for the PR. I've suggested a change and provided couple of clarifications. Please have a look at it and let me know if my comments make sense.

[char0n]

We have two options here - Introduce a new DebounceTextArea along with already existing TextArea or as a second option use DebounceInput in ad-hoc basis.

IMHO first option is preferable, as we can reuse code that way.

export const DebounceTextArea = (props) => <DebounceInput element={TextArea} debounceTimeout={350} forceNotifyByEnter={false} {...props} />

[char0n]

Additionally thank you for aligning with existing 350 ms debounce timeout which is consistent with the rest of the codebase.

forceNotifyByEnter={false} seems idiomatic for debounced textareas as they allow editing multiline text.

[orck-adrouin]

The default value for forceNotifyByEnter is true which I find a bit strange. I decided to set it to false to prevent triggering the "bounce" when adding a new line with the 'enter key' for performance reason.

My spec file is 1.7MB (600+ requests with big models) and without this option the UI is laggy when adding new lines.