Bulk vue updates on update

[NiklasNeugebauer]

I noticed that adding or changing a large number of elements, especially inside an SVG tag, takes very long.

This changes the update handler to first load all dependencies in parallel and then edit the elements in a single Vue tick.

[NiklasNeugebauer]

Small example for testing:

from nicegui import ui
from nicegui.element import Element

class Circle(Element, component='circle.js'):
    def __init__(self, x=0, y=0, r=10, fill='red', **kwargs):
        super().__init__(**kwargs)
        self._props['x'] = x
        self._props['y'] = y
        self._props['r'] = r
        self._props['fill'] = fill

@ui.page('/')
def test_page() -> None:
    rows = 20
    cols = 20
    x_offset = 20
    y_offset = 20
    x_spacing = 40
    y_spacing = 40

    with ui.column():
        ui.label('Circles').classes('text-xl mb-2')
        circle_container = ui.element('svg').classes('w-[800px] h-[800px] mb-4')
        circles: list[Element] = []

        def create_circles() -> None:
            with circle_container:
                for i in range(rows):
                    for j in range(cols):
                        element = Circle(x=x_offset + i * x_spacing, y=y_offset + j * y_spacing, r=5, fill='red')
                        circles.append(element)

        def remove_circles() -> None:
            for circle in circles:
                circle.delete()
            circles.clear()

        async def change_circle_colors() -> None:
            for circle in circles:
                circle.props('fill=blue')

        async def change_circle_sizes() -> None:
            for circle in circles:
                circle.props('r=10')

        with ui.row():
            (ui.button('Create Grid', on_click=create_circles)
                .props('flat dense color="primary"'))
            (ui.button('Remove Grid', on_click=remove_circles)
                .props('flat dense color="primary"'))
            (ui.button('Change Colors', on_click=change_circle_colors)
                .props('flat dense color="primary"'))
            (ui.button('Change Sizes', on_click=change_circle_sizes)
                .props('flat dense color="primary"'))

ui.run(port=8040)

circle.js:

export default {
  template: `
      <circle :cx="x" :cy="y" :r="r" fill="none" :stroke="fill" stroke-width="1" />
    `,
  props: {
    r: Number,
    fill: String,
    x: Number,
    y: Number,
  },
};