🏷️

State: Custom Loading

What does it do?

Replaces the default Bravo loading screen with a custom design app page.

image
💡

The loading screen will only appear for screens that need to load external data.

The Tag

[state:loading]

Which layer can I put it on?

A top-level app page

How do I set it up in the design tool?

  1. Create a standalone loading screen design.
  2. 💡

    Pro tip: use the LottieFiles Figma plugin to easily add a Lottie as your loading animation.

    image
  3. Add a container around the design.
  4. image
  5. Paste the tag into the layer name of the top-level app page.
  6. image
  7. Import design file into Bravo.
  8. Set up your binding as usual. You can use the example Airtable below to get sample data.
  9. image

  10. Preview the custom loading screen on Bravo Vision. 🚀

Figma Example

Open & duplicate the Figma file below to see how it's set up.

Data Example

  1. Duplicate this Airtable to get sample data for the example app above.

2. Use the Bravo Airtable API Wizard to easily create requests for the list and detail page.

image