[Question] Big Lists

[Nexxtron]

Hello, Currently I have a List (as Component). The list can have up to 1000 rows. Each row can have some styles and optionally more components. The row component can be rather heavy (have a lot of content).

{% import Row from "./list/row" %}

<div class="list">
    <div class="table">
    {% for rowIndex, row of rows %}
      <Row id={{id}} rowIndex={{rowIndex}} row={{row}} columns={{columns}} />
    {% endfor %}
    </div>
</div>

Now, if I add one row to the start of the List, Monkberry updates/re-renders all rows and then things get slow... (When all Rows are re-rendered/updated it takes on FF about 600ms) How could I overcome this problem? With keyed Lists? Is there any update?

Thanks in advance :)

[antonmedv]

Hello,

Yes keyed list is solution for your problem. But currently Monkberry does not supports keyed list. I think to add this feature in next Monkberry v5.

[kisenka]

@elfet any ETA of v5? :)

[antonmedv]

I wish i have ETA :)

[Nexxtron]

Is there any workaround/hack to overcome this problem, at the moment? Sth. like pre-fill the "row" array and set all rows to invisible? Then, when I add a row, I toggle the visibility?

[antonmedv]

Yes, workaround for this simple: implement manipulating with big rows in vanilla.js. In this case you get get best performance possible, but it of cause require you to write additional code.