Description
Cdx-text-input component inside FunctionDefinitionInputsItem triggers the action setArgumentLabel for every letter that's pressed. The way this action works means a lot of vuex store modifications. Because this is triggered for every character, typing a word becomes a very intense operation which massively affects front-end performance.
These are the actions triggered for one letter in the input:
We should investigate into this, do a bit of profiling, see if we can reduce the load that the vuex store takes for updating these fields, and maybe only trigger these actions when the input changes and not when it receives each letter.
Steps to reproduce:
- Go to https://wikifunctions.beta.wmflabs.org/wiki/Special:CreateZObject?zid=Z8
- Write text in the input text fields
- Try adding another input and write text in the field
Observed behavior:
- Response is delayed
Expected behavior (Acceptance criteria):
- No performance issues
Completion checklist
- Before closing this task, review one by one the checklist available here: https://www.mediawiki.org/wiki/Abstract_Wikipedia_team/Definition_of_Done#Front-end_Task/Bug_Completion_Checklist