Overlay

Pressing the button loads the orders. The server is configured to respond late, and an overlay is shown during the wait.

Why the overlay cannot be part of the screen

Screen >> load = (
  overlay tell show.
  r := (Http get: 'orders.json?delay=1200') forced.
  overlay tell hide.
  self with: { answer: self countIn: r } ).

A handler returns the next state, and the region is redrawn when the state changes. While the handler waits at forced, it has not returned a state, so nothing is redrawn. A loading : Bool field on the screen would not help: the state in which it is true would only be drawn after the response arrives. Measured, the screen is drawn twice: before the wait and after.

So the overlay is a separate actor, mounted elsewhere on the page. It processes messages while the screen actor is waiting. One actor waiting does not stop the page.

Writing it with forced

Show the overlay, wait, hide it: three lines in one handler, in the order they happen. Compared with receiving the response as a message to self, the order of the code matches the order of events. This suits screens that make one request per click.

A shared component that is an actor

The date picker is not an actor and holds no state. The overlay must change its display while the screen is waiting, so it is an actor with one piece of state: whether it is shown.

The overlay sends no messages back to its caller, so it does not depend on the caller's type. Any screen can use it.

The page provides CSS for two class names and a container element outside the screen actor's region.