-
Notifications
You must be signed in to change notification settings - Fork 9.1k
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
Comments
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. |
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. |
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. |
Unfortunately, no. It takes a bit longer to load, but still no lag when trying to edit input. |
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. |
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 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. |
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. |
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. |
Possibly related: #5113 |
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. |
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 |
We are also experiencing some serious lag when typing characters or removing characters. This is going to be a serious problem for us. |
Same problem here... and no fix more than 2 years later :( |
I ended up just writing the body in some editor and the pasting it 🙄 |
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
The text was updated successfully, but these errors were encountered: