Skip to content

Performance issue when typing text #5850

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wmccusker opened this issue Feb 18, 2020 · 14 comments · May be fixed by #5882 or #10345
Open

Performance issue when typing text #5850

wmccusker opened this issue Feb 18, 2020 · 14 comments · May be fixed by #5882 or #10345

Comments

@wmccusker
Copy link

  • OS: macOS, windows
  • Browser: Safari, IE, Chrome
  • Method of installation: dist
  • Swagger-UI version: 3.25.0
  • Swagger/OpenAPI version: OpenAPI 3.0.1

With a large definition file (150+ models and resources) there is a noticeable lag when I am typing in input fields. The issue is most pronounced on IE.

Issue appears to be similar to what was reported in #4057 however the plugin workaround doesn't address the issue. The console log does report 'render' for each key press but the early return doesn't improve the performance the way it was reporting in the original issue.

Example Swagger/OpenAPI definition:
openapi-example.yaml.zip

@webron
Copy link
Contributor

webron commented Feb 18, 2020

I've tried the attached definition in both FF and Chrome, and have not noticed any significant lag. IE is officially not supported anymore, so no improvements are expected there.

@wmccusker
Copy link
Author

Here is a larger one, with 250 paths and models. This one definitely reproduces what I am seeing with my open api definition. When I type rapidly the input lags.

openapi-250-example.yaml.zip

@wmccusker
Copy link
Author

wmccusker commented Feb 19, 2020

Were you able to reproduce the issue with the new example? I am seeing the same behavior with my actual openapi definition which is probably larger than the 250 example.

@webron
Copy link
Contributor

webron commented Feb 19, 2020

Unfortunately, no. It takes a bit longer to load, but still no lag when trying to edit input.

@wmccusker
Copy link
Author

What browser are you using to test with? I tested inputing the 250 example into https://editor.swagger.io/ using Chrome (Version 80.0.3987.116) and when I click "Try it out" on /v1/resource the input to Request body is sluggish. Typing at a normal speed there is a slight lag, noticeable but not huge but when I attempt to rapidly input text for the value of the "first" I can see a significant delay.

@wmccusker
Copy link
Author

I cloned the sources and added some console logging and it seems like for every key press in the input editor the operations model is being rendered. I put console.log inside the "render" method of the following components

app.jsx
operation-summary.jsx
operation.jsx
operations.jsx
param-body.jsx
model.jsx
models.jsx

Then when I would type into the input editor I would see a log message from render for app, operation, operations, operation-summary and param-body. There was no render logging from model but one message from models. I would see one message from operation per operation in my definition. Based on this I have recreated a better example of my actual open api definition which reproduces the issue.

In this example I have the exact number of paths from my original open api definition and I have filled in post, put, get, delete operations for each path since this what my actual definition does. With this new example in the online editor is very easy to try typing a sentence and seeing that the editor will lag several words behind what I am typing.

openapi-operations-example.yaml.zip

@wmccusker
Copy link
Author

The 'request body' and 'parameters' are behaving differently. When I type into the input field for a parameter there is no lag and from logging 'onChange' is not triggered until after I stop typing. For the textarea used by the request body 'onChange' is firing while I am still typing leading to much more re-rendering compared to typing in the parameter's input.

Any ideas why that might be the case? I don't know react very well and I can't find anything that indicates that input and textarea should have different onChange behavior.

@wmccusker
Copy link
Author

There appear to be different code paths for a Swagger v2 definition compared to an OpenAPI v3 definition. In my case I have an OpenAPI v3 definition which the start of the re-render seems to be caused by request-body-editor.jxs

That component's onChange handler for the textarea ends up triggering an event in reducers.js to update the request body value. When this happens the new state causes the app to re-render and incurs significant lag on each key press as the user types.

@webron can you reproduce the issue? I don't know react or redux or immutable so I don't really know what can be done. The 'best' local change that I have found is to move the part of the onChange that triggers the redux reducer to the 'onBlur' event so that the user can type in the request body field and only when they move away, say to execute, will the costly state update happen. I attached a git diff of this but not knowing react I don't know if this is a viable approach.

Any help would be appreciated, thanks.
onBlur.txt.zip

@wmccusker wmccusker linked a pull request Feb 27, 2020 that will close this issue
17 tasks
@hkosova
Copy link
Contributor

hkosova commented Mar 29, 2020

Possibly related: #5113

@duhseekoh
Copy link

Experiencing the same thing here when typing in request body or any params. We can't render the list as 'full' where everything is expanded due to this.

@acdha
Copy link

acdha commented Jun 9, 2021

I see what appears to be the same issue with an OpenAPI3 document with only 16 schema elements. The key down event triggers repeated rerendering of a large number of elements even though none of them have changed in any way — this means that Swagger UI can barely handle text at 1 character per second in a <input> and the request body <textarea> seems to be even slower.

Screen Shot 2021-06-09 at 11 05 06 AM

@smellyfrogcom
Copy link

We are also experiencing some serious lag when typing characters or removing characters. This is going to be a serious problem for us.

@JeremyCaron
Copy link

JeremyCaron commented Nov 30, 2022

Same problem here... and no fix more than 2 years later :(
Using chrome.

@olgeni
Copy link

olgeni commented Jul 28, 2023

I ended up just writing the body in some editor and the pasting it 🙄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
8 participants