Delay events before handshake (#3580)

* delay events before handshake

* wait before accessing the client ID

nicegui/static/nicegui.js

@@ -174,14 +174,18 @@ function renderRecursively(elements, id) {
       handler = eval(event.js_handler);
     } else {
       handler = (...args) => {
-        const data = {
-          id: id,
-          client_id: window.clientId,
-          listener_id: event.listener_id,
-          args: stringifyEventArgs(args, event.args),
+        const emitter = () =>
+          window.socket?.emit("event", {
+            id: id,
+            client_id: window.clientId,
+            listener_id: event.listener_id,
+            args: stringifyEventArgs(args, event.args),
+          });
+        const delayed_emitter = () => {
+          if (window.did_handshake) emitter();
+          else setTimeout(emitter, 10);
         };
-        const emitter = () => window.socket?.emit("event", data);
-        throttle(emitter, event.throttle, event.leading_events, event.trailing_events, event.listener_id);
+        throttle(delayed_emitter, event.throttle, event.leading_events, event.trailing_events, event.listener_id);
         if (element.props["loopback"] === False && event.type == "update:modelValue") {
           element.props["model-value"] = args;
         }
@@ -308,6 +312,7 @@ function createApp(elements, options) {
         extraHeaders: options.extraHeaders,
         transports: options.transports,
       });
+      window.did_handshake = false;
       const messageHandlers = {
         connect: () => {
           let tabId = sessionStorage.getItem("__nicegui_tab_id");
@@ -322,6 +327,7 @@ function createApp(elements, options) {
             }
             document.getElementById("popup").ariaHidden = true;
           });
+          window.did_handshake = true;
         },
         connect_error: (err) => {
           if (err.message == "timeout") {