> For the complete documentation index, see [llms.txt](https://docs.thndr.io/integration/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thndr.io/integration/customisation/loading-screen.md).

# 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:

```json
{
  "message": "operator_game_ready"
}
```

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

**Example listener**

```javascript
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.