Description
- 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
Metadata
Metadata
Assignees
Labels
No labels
Activity
webron commentedon 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 commentedon Feb 18, 2020
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 commentedon 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 commentedon Feb 19, 2020
Unfortunately, no. It takes a bit longer to load, but still no lag when trying to edit input.
wmccusker commentedon Feb 20, 2020
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 commentedon Feb 24, 2020
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 commentedon Feb 25, 2020
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 commentedon Feb 25, 2020
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
hkosova commentedon Mar 29, 2020
Possibly related: #5113
duhseekoh commentedon Apr 3, 2020
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 commentedon 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.smellyfrogcom commentedon Jun 16, 2021
We are also experiencing some serious lag when typing characters or removing characters. This is going to be a serious problem for us.
JeremyCaron commentedon Nov 30, 2022
Same problem here... and no fix more than 2 years later :(
Using chrome.
olgeni commentedon Jul 28, 2023
I ended up just writing the body in some editor and the pasting it 🙄
1 remaining item