UI hangs when typing in request body

[LuukN2]

Q&A (please complete the following information)

• OS: [Windows 10 Education]
• Browser: [Chrome]
• Version: [71.0.3578.98 (Official Build) (64-bit)]
• Method of installation: [NSwag, Swagger editor]
• Swagger-UI version: [3.19.0-3.20.3]
• Swagger/OpenAPI version: [OpenAPI 3.0.0]

Content & configuration

Example Swagger/OpenAPI definition:
https://pastebin.com/raw/Zh5ZGN17
Note: This spec is obfuscated

Swagger-UI configuration options:
Swagger editor default settings

Describe the bug you're encountering

Every key press in the request body takes about ~800 ms to process. The ui hangs and freezes while typing and opening operations also takes a very long time.

To reproduce...

Steps to reproduce the behavior:

1. Go to any post operation
2. Click on try it out
3. Type in the request body field
4. The UI will hang for a while for each keystroke, the more keystrokes the longer

Expected behavior

The UI does not hang or only for a very short time when entering words in the request body text field.

Additional information

Callstack of a single key press event:

[LuukN2]

Update:

So I've been looking further into this as the UI is so slow it's blocking us from being able to use the newer Swagger UI.

Whenever I type in the textarea of the requestBody the onChange method is called. This method calls a reducer which uses setIn on the state map.
When this map is changed it causes the whole page to re-render which makes every key press take a long time to process.

Expanding endpoint is also really slow. It takes around 5 seconds to expand any endpoint. The size of the example seems to have no impact on how long it takes to expand the operation.

[shockey]

@LuukN2, what sort of hardware are you on? I see about 150ms of latency typing in POST /MBZCZWQRYJBD - not great, but not 800ms either. Just trying to understand what sort of benchmark we'd need to hit to solve this for you.

More generally, I think it'd be a good idea to debounce the request body input's onChange, like we do for string parameter inputs today. At the very least it'd let you get multiple keystrokes in before getting choked up by the state changes.

[shockey]

PS: interesting that you obfuscated your private API definition. Did you do that manually, or with a tool?

[LuukN2]

@shockey Thanks for the response!

I'm using a laptop with an i5-6200U CPU @ 2.30GHz and 8GB of RAM.
Usually I'll have Jetbrains Rider open in the background and some other tabs in chrome. So it's not the fastest hardware but it usually runs things fine.

As for the obfuscation I quickly wrote a tool with the help of another developer using jsonpaths to obfuscate parts of the spec.

[LuukN2]

@shockey
Any updates on this?

The performance is still blocking us from using the newer Swagger UI.
I have looked into this and I have managed to get the performance doubled by implementing shouldComponentUpdate on some of the elements. (Operation, OperationContainer and ModelWrapper)

Because react uses shallow comparison for updating elements this always results in shouldComponentUpdate in returning true for elements that reference parts of the immutable map since every time the state is changed so does the object reference.

I check for relevant data changes in the properties passed to the element and only return true when they are present. It still has some issues since I'm not covering all cases where an element should rerender but it is mostly functional and when using a minified spec with these changes the UI is usable for us.

I'll try to work out something issue free that we can personally use but your thoughts could be very helpful.

[tinacious]

I would also like to echo that this is still an issue. To make it easier for your team to debug I've created a StackBlitz deployment that uses the largest OpenAPI JSON spec I could find. You can test it here:

1. StackBlitz code view: https://stackblitz.com/edit/swagger-ui-react-performance-demo
2. StackBlitz preview: https://swaggeruireactperformancedemo-zvzp--5173--5a421e5b.local-credentialless.webcontainer.io (not sure if this link changes so if it doesn't work, see the code view)

I've also attached a video below in which the following happens:

1. I've got React Dev Tools running to highlight component re-renders
2. I scroll to the first POST request I can see and I expand the menu. Expanding causes a full page re-render. It should not.
3. I select some text and start typing 1 approximately 10 times. We can see there's some console warnings and component re-renders. Typing in this input should not cause the application to re-render.

With what I've provided, you should be able to reproduce the issue very easily, but if you need anything else, please let me know.

After taking a peek at the code, it seems like it would be a good amount of work to fix this. Very grateful for your work on Swagger UI and looking forward to seeing this fixed, thanks! 🙏

swagger-ui-reaact.performance.demo.mov