---
description: Optimising asset loading feature
---

# 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).
