Skip to content

Performance issue when typing text #5850

@wmccusker

Description

@wmccusker
  • 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

Activity

webron

webron commented on Feb 18, 2020

@webron
Contributor

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

wmccusker commented on Feb 18, 2020

@wmccusker
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

wmccusker commented on Feb 19, 2020

@wmccusker
Author

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

webron commented on Feb 19, 2020

@webron
Contributor

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

wmccusker

wmccusker commented on Feb 20, 2020

@wmccusker
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

wmccusker commented on Feb 24, 2020

@wmccusker
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

wmccusker commented on Feb 25, 2020

@wmccusker
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

wmccusker commented on Feb 25, 2020

@wmccusker
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

hkosova

hkosova commented on Mar 29, 2020

@hkosova
Contributor

Possibly related: #5113

duhseekoh

duhseekoh commented on Apr 3, 2020

@duhseekoh

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

acdha commented on Jun 9, 2021

@acdha

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

smellyfrogcom commented on Jun 16, 2021

@smellyfrogcom

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

JeremyCaron

JeremyCaron commented on Nov 30, 2022

@JeremyCaron

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

olgeni

olgeni commented on Jul 28, 2023

@olgeni

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

1 remaining item

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @acdha@wmccusker@webron@olgeni@duhseekoh

      Issue actions

        Performance issue when typing text · Issue #5850 · swagger-api/swagger-ui