From 4990c7228ba7b03e2e1b2f2da2ccee99700534fb Mon Sep 17 00:00:00 2001
From: Niklas Neugebauer <68709968+NiklasNeugebauer@users.noreply.github.com>
Date: Mon, 20 Jan 2025 15:50:29 +0100
Subject: [PATCH] Bulk vue updates on update (#4235)

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 update the elements.
---
 nicegui/static/nicegui.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/nicegui/static/nicegui.js b/nicegui/static/nicegui.js
index 7c86d490c..762838076 100644
--- a/nicegui/static/nicegui.js
+++ b/nicegui/static/nicegui.js
@@ -376,14 +376,17 @@ function createApp(elements, options) {
           document.getElementById("popup").ariaHidden = false;
         },
         update: async (msg) => {
+          const loadPromises = Object.entries(msg)
+            .filter(([_, element]) => element && (element.component || element.libraries))
+            .map(([_, element]) => loadDependencies(element, options.prefix, options.version));
+
+          await Promise.all(loadPromises);
+
           for (const [id, element] of Object.entries(msg)) {
             if (element === null) {
               delete this.elements[id];
               continue;
             }
-            if (element.component || element.libraries) {
-              await loadDependencies(element, options.prefix, options.version);
-            }
             this.elements[id] = element;
             replaceUndefinedAttributes(this.elements, id);
           }