non-responsive input handler and ack message

Author: JamesHutchison

src/js/packages/@reactpy/client/src/messages.ts

@@ -17,6 +17,10 @@ export type ReconnectingCheckMessage = {
   value: string;
 }
 
-export type IncomingMessage = LayoutUpdateMessage | ReconnectingCheckMessage;
+export type AckMessage = {
+  type: "ack"
+}
+
+export type IncomingMessage = LayoutUpdateMessage | ReconnectingCheckMessage | AckMessage;
 export type OutgoingMessage = LayoutEventMessage | ReconnectingCheckMessage;
 export type Message = IncomingMessage | OutgoingMessage;

src/js/packages/@reactpy/client/src/reactpy-client.ts

@@ -184,6 +184,7 @@ export class SimpleReactPyClient
   private socketLoopThrottle: number;
   private pingPongIntervalId?: number | null;
   private pingInterval: number;
+  private messageResponseTimeoutId?: number | null;
 
   constructor(props: SimpleReactPyClientProps) {
     super();
@@ -340,9 +341,21 @@ export class SimpleReactPyClient
       }
       this.lastActivityTime = Date.now();
       this.socket.current.send(JSON.stringify(message));
+
+      // Start response timeout for reconnecting grayout
+      if (this.messageResponseTimeoutId) {
+        window.clearTimeout(this.messageResponseTimeoutId);
+      }
+      this.messageResponseTimeoutId = window.setTimeout(() => {
+        this.showReconnectingGrayout();
+      }, 800);
     }
   }
 
+  protected handleIncoming(message: any): void {
+    super.handleIncoming(message);
+  }
+
   idleTimeoutCheck(): void {
     if (!this.socket)
       return;
@@ -446,7 +459,15 @@ export class SimpleReactPyClient
             this.reconnect(onOpen, thisInterval, newRetriesRemaining, lastAttempt);
           }
         },
-        onMessage: async ({ data }) => { this.lastActivityTime = Date.now(); this.handleIncoming(JSON.parse(data)) },
+        onMessage: async ({ data }) => {
+          this.lastActivityTime = Date.now();
+          if (this.messageResponseTimeoutId) {
+            window.clearTimeout(this.messageResponseTimeoutId);
+            this.messageResponseTimeoutId = null;
+            this.hideReconnectingGrayout();
+          }
+          this.handleIncoming(JSON.parse(data));
+        },
         ...this.reconnectOptions,
       });
       this.socketLoopIntervalId = window.setInterval(() => { this.socketLoop() }, this.socketLoopThrottle);

src/py/reactpy/reactpy/core/serve.py

@@ -126,6 +126,7 @@ async def _single_incoming_loop(
         # We need to fire and forget here so that we avoid waiting on the completion
         # of this event handler before receiving and running the next one.
         task_group.start_soon(layout.deliver, await recv())
+        await send(AckMessage(type="ack"))
 
 
 class WebsocketServer:

src/py/reactpy/reactpy/core/types.py

@@ -269,6 +269,10 @@ class PingIntervalSetMessage(TypedDict):
     ping_interval: int
 
 
+class AckMessage(TypedDict):
+    type: Literal["ack-message"]
+
+
 class Context(Protocol[_Type]):
     """Returns a :class:`ContextProvider` component"""