Loading Screen

When THNDR is embedded in your app, there is a gap between the iframe or webview rendering and the game being fully downloaded and initialised. During this time the host app sees a blank or partially rendered frame.

To cover this, you can show your own loading screen overlay on top of the embedded game. Once the game is ready, THNDR emits a postMessage so your app knows it is safe to dismiss the overlay.

postMessage event

Once the game has finished downloading and initialised, the widget emits the following message to the parent window:

{
  "message": "operator_game_ready"
}

The message is sent as a JSON string. Parse event.data before checking the message field.

Example listener

window.addEventListener("message", (event) => {
  let data;

  try {
    data = JSON.parse(event.data);
  } catch {
    return;
  }

  if (data?.message === "operator_game_ready") {
    // Hide or remove your loading screen overlay
    document.getElementById("loading-overlay").style.display = "none";
  }
});

Recommended approach

Show your loading overlay as soon as you render the iframe or webview. Keep it visible until operator_game_ready is received. This ensures the user sees a polished, controlled experience rather than the game loading in mid-render.

There is no timeout built into the widget. If you want to handle a slow connection gracefully, set your own timeout and decide how to handle it on the host side.