Skip to content

Poor performance while editing large files #2009

@sondrele

Description

@sondrele

Describe the bug
I have a file with a bunch of messages, the model is essentially the same config as for the authors in the netlify-cms dev-test.

While editing a message, the performance is very poor and results in a very janky UI.
I'm assuming this is due to the onChange handler being called on every edit, which results in validation, and re-rendring of the entire component tree (please correct me if I'm wrong, I do not have a good overview of the internals in netlify-cms).

If my assumption is (somewhat) correct I propose storing the values while editing locally in the widgets instead of calling the onChange handler on every event, and only call the onChange handler in an onBlur handler instead.

To Reproduce
The easiest way to reproduce is to start the dev-test locally with a lot of authors manually configured:

  1. Clone my fork: https://github.com/sondrele/netlify-cms
  2. In the cloned directory: yarn && yarn develop
  3. Navigate to: http://localhost:8080/#/collections/settings/entries/authors
  4. Start editing the name of the first author

Expected behavior
Editing content should not have that kind of performance problems.

Screenshots

I've included a gif of what it looks like when writing. Not sure how obvious it is from the video, but I can testify that I'm hitting the keys way faster than the characters appear :)
messages
Applicable Versions:

  • Netlify CMS version: 2.3.3
  • Git provider: any
  • OS: Linux
  • Browser version: Firefox 65
  • Node.JS version: 11.1.0

CMS configuration
Here: https://github.com/sondrele/netlify-cms/blob/master/dev-test/config.yml
Authors data: https://github.com/sondrele/netlify-cms/blob/master/dev-test/index.html#L42

Additional context

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions