# Preload

The <mark style="color:red;">`[preload]`</mark> tag is designed to improve asset loading by including them in the App bundle, reducing the occurrence of loading spinners and provides a smoother user experience. Think of it as an offline mode for assets.

{% hint style="info" %}
This feature is supported only in final apps and cannot be tested on Bravo Vision.
{% endhint %}

Use it specifically for assets that stay permanent in the app and don't change too often, like menu icons and the search icon. Keep in mind that including these assets in the app bundle will increase its size, so it's advisable to use this feature occasionally.

## 👉 **The Tag** <a href="#the-tag" id="the-tag"></a>

```
[preload]
```

:round\_pushpin:**Where to add the tag:**

Apply this tag at **any level**: top-level app page, containers, or individual components such as icons, text or images that you want to include in the app bundle to reduce loading spinners experiences.&#x20;

{% hint style="warning" %}
We recommend the preload tag usage **only** **for permanent assets** such as menu icons as using it frequently will consequently increase the app bundle's size.
{% endhint %}

## :hourglass\_flowing\_sand:**How It Works** <a href="#how-to-add-the-tag" id="how-to-add-the-tag"></a>

1. **Placement**: In any page, container, or component, add the following tag: <mark style="color:red;">`[preload]`</mark>.
2. **Build request**: The page, container, or components will be included in the app bundle when you request the build.
3. **Asset Update**: If you make changes to the page, container, or component, we recommend requesting a new build; otherwise, you might end up with two versions of the asset in the app bundle. The previous and the new version will be included. Requesting a new bundle ensures only the latest changes are included.

### :floppy\_disk: **Example design file**

Have a look at the following example to see how you can leverage to include this feature in your Bravo apps.\
\
**Figma file design:**

{% @figma/embed fileId="cX9z61rITQD8Uj6aVkfxye" nodeId="0:1" url="<https://www.figma.com/file/cX9z61rITQD8Uj6aVkfxye/Bravo-Sample%3A-Preload?mode=design&node-id=0-1&t=3vXqxdasosHasIaR-0&type=design>" %}

Your feedback is valuable to us. If you have any suggestions, questions, or issues, please don't hesitate to reach out to the [community](https://community.bravostudio.app/home).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bravostudio.app/bravo-tags/loading-experience/preload.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.