Preload

Optimising asset loading feature

The [preload] 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.

This feature is supported only in final apps and cannot be tested on Bravo Vision.

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

[preload]

📍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.

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.

⏳How It Works

1. Placement: In any page, container, or component, add the following tag: [preload].

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.

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

Not found

Your feedback is valuable to us. If you have any suggestions, questions, or issues, please don't hesitate to reach out to the community.