I have a problem with the rendering speed of the form-repeat items.
I have a form-repeat for invoice rows where I calculate the amount * price * VAT and totals of all rows at the end.
When I have a larger amount of items/rows (200 rows or more) the browser can't handle it.
It loads for 20+ seconds or even get a browser alert saying the page isn't responding.
If I convert the form-repeat to a normal repeat it loads 5 to 10 times faster.
I made a simple test where I load 1000 rows with 2 inputs that calculate a simple sum and an input that sums te total of all rows.
When clicking on the button for one of the repeats I use console.timeLog to see how long it takes to load and calculate al rows.
<div class="d-flex">
<button dmx-on:click="run({setGlobal:{outputType:'text',key:'tab',value:0}})">tab 0</button>
<button dmx-on:click="run({setGlobal:{outputType:'text',key:'tab',value:1}})" onclick="console.time('normal repeat')">tab 1 (normal repeat)</button>
<button dmx-on:click="run({setGlobal:{outputType:'text',key:'tab',value:2}})" onclick="console.time('form repeat')">tab 2 (form repeat)</button>
</div>
<dmx-if dmx-bind:condition="tab==1">
<form is="dmx-serverconnect-form" id="form" action="/api/formpost" method="post">
<input type="text" dmx-bind:value="positions.items.sum('price.value.toNumber()')" onupdated="console.timeEnd('normal repeat')">
<div id="positions" is="dmx-repeat" dmx-bind:repeat="1000">
<div class="d-flex">
<p>#{{$index}}</p>
<input type="number" name="amount" dmx-bind:value="$index">
<input type="number" name="price" dmx-bind:value="(amount.value.toNumber() * $index / 3.33)">
</div>
</div>
</form>
</dmx-if>
<dmx-if dmx-bind:condition="tab==2">
<form is="dmx-serverconnect-form" id="form_b" action="/api/formpost" method="post">
<input type="text" dmx-bind:value="positions.items.sum('price.value.toNumber()')" onupdated="console.timeEnd('form repeat')">
<div is="dmx-form-repeat" id="positions" dmx-bind:items="1000">
<div class="d-flex">
<p>#{{$index}}</p>
<input type="number" name="amount" dmx-bind:value="$index">
<input type="number" name="price" dmx-bind:value="(amount.value.toNumber() * $index / 3.33)">
</div>
</div>
</form>
</dmx-if>
Is there any way I can improve this.