Syslifters
Performance issues on list -> string fields
Hello,
We would like to use a field we created (a list of string) to put the scope of machines tested.
However, we noticed that the frontend seriously lags when displaying the information on the sysreptor UI, when adding a bit more than a dozen items.
Do you have any ideas if this performance issue can be mitigated? Should we just use markdown and put this list inside ? (we don't notice any performance issue my doing so)
What is your opinion on the matter?
Best, Danymat
Hi, thanks for reporting the performance problem. We will investigate.
As a workaround, lists in Markdown fields will yield better performance. Mainly because there is only one (markdown) field instance instead of many (list item) field instances that need to be managed, updated, rendered, etc. Under the hood, Markdown and String fields are quite similar because both are CodeMirror editor instances with a different UI.
I found a bug where the focus of the string list item is lost when there are duplicate values in the list. Without the focus loss the editing feels smoother, but there still is a slight lag typing very fast. Did you also notice this focus loss?
Hello, not really related to focus loss though, i'm noticing more the lag related to the number of values entered on the list. But they seem to be somehow related I think that this dynamic UI view that constructs a list of string is what lags, overall.
A quick fix would maybe be to save the last configuration of the "Bulk Edit list item" for everyone: if bulk edit is selected, then keep it that way: i then think the UI will be smoother
Thanks for the info.
Syncing the bulk edit state of fields is a bit tricky because we need to add a new data structure to store this version and distribute the state over WebSockets. I think a better solution is to identify and fix the performance problems in list editing itself.
A bit unrelated to this issue but as a temporary quick fix for us: If we use markdown field instead of list of strings, is it possible to use this markdown field instead html as a list ? (ul,li)
You could post-process the markdown field's text content via JavaScript in the design's HTML+Vue code. Following code snippet splits the markdown field into an array of lines that you can use like a list[string] field in the design.
<ul>
<li v-for="item in finding.field_markdown_list.split('\n').map(l => lodash.trimStart(l, '* ')).filter(l => !!l)">
List item (markdown line): {{ item }}
</li>
</ul>
Fixed the focus loss bug described in https://github.com/Syslifters/sysreptor/issues/440#issuecomment-2777756001 in https://github.com/Syslifters/sysreptor/releases/tag/2025.37
A general performance improvement of lists requires larger refactoring of Vue reactivity updates and prop passing for collaborative editing to reduce the number of updates and re-rendering.
Refactored reactivity updates for collaborative editing to improve performance (including lists) in https://github.com/Syslifters/sysreptor/releases/tag/2025.43