# beforeLoad

The `beforeLoad` array sets the criteria to be satisfied before the `load` method completes. If you don't specify a `beforeLoad` array, the `load` method finds a root element for a regular page object, or waits for the root element to be present for a root page object, by default.

:::note
Statements inside the `beforeLoad` array can reference only `root` or `document` elements because other elements are not loaded yet.
:::

This `ApplicationHome` page object waits for the DOM to finish rendering before loading is complete and then waits for the root and indicator elements:

```json
{
  "selector": {
    "css": "application-home"
  },
  "root": true,
  "beforeLoad": [
    {
      "element": "document",
      "apply": "waitForDocumentReady"
    },
    {
      "apply": "waitFor",
      "args": [
        {
          "type": "function",
          "predicate": [
            {
              "element": "root",
              "apply": "isPresent"
            },
            {
              "element": "root",
              "apply": "containsElement",
              "args": [
                {
                  "type": "locator",
                  "value": {
                    "css": ".indicator"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
```

## Load an element

When `load` is set to true for an element.A [waitFor method for the element](/docs/platform/utam/references/utam-grammar/page-object-elements.md#load-an-element) is generated and it is automatically invoked in the `beforeLoad` method.

## Invoke beforeLoad from compose

Sometimes page can be partially reloaded, then to avoid stale elements we might need to invoke `beforeLoad` from compose method. Note that invocation should be of the method `load` which is part of public API, here is an example:

```json
{
  "name": "reloadAndClick",
  "compose": [
    {
      "element": "increment",
      "apply": "click"
    },
    {
      "apply": "load"
    }
  ]
}
```