In this tutorial, we want to show a "Loading..." message while a Repeating Group or Group with a data source is fetching its data and hide it once the data is ready.

Setup

1. Add a Repeating Group or a Group that has a data source which might take time to load (e.g., Do a search for...). Name this element Group Product List (or whatever data it displays).
2. Add a Text element (or a Group containing a spinner image) somewhere on the page, ideally where the data will appear. Set its text to "Loading...". Name this element Text Loading Message.
3. In the Text Loading Message's property editor, under Layout, keep "This element is visible on page load" checked.
4. In the Group Product List's property editor, under Layout, you might want to uncheck "This element is visible on page load" so it doesn't flash empty data, although sometimes leaving it checked is fine if its content relies purely on the data source loading. Let's uncheck it for this example to ensure the loading message is primary.

Add the Conditional Logic

For the Text Loading Message (hide when the data group is not loading):

1. Select Text Loading Message.

2. Go to the Conditional tab.

3. Click Define another condition.

4. Click where it says "Click here to define a condition".

5. Select your data group: Group Product List.

6. Add the operator: Select is loading.

7. Set the value to no.

   • Condition: Group Product List is loading is "no"

8. Click where it says "Click here to define another property."

9. Select This element is visible.

10. Set the value to no.

    • Rule: When Group Product List is loading is "no" Then This element is visible is "no"

For the Group Product List (show when it's not loading - i.e., loading is complete):

1. Select Group Product List.

2. Go to the Conditional tab.

3. Click Define another condition.

4. Click where it says "Click here to define a condition".

5. Select Group Product List.

6. Select the operator: is loading.

7. Set the value to no.

   • Condition: Group Product List is loading is "no"

8. Click where it says "Click here to define another property."

9. Select This element is visible.

10. Set the value to yes.

    • Rule: When Group Product List is loading is "no" Then This element is visible is "yes"

Testing:

1. Preview your page. The "Loading..." message should appear immediately.
2. Bubble will start fetching the data for Group Product List.
3. While the data is loading, the "Loading..." message remains visible, and Group Product List is hidden.
4. Once the data fetching is complete (Group Product List is loading becomes no), the conditions will trigger: the "Loading..." message hides, and Group Product List becomes visible, displaying the loaded data.

ABOUT ME

I'm Juliet Edjere, a systems thinker focused on how AI changes operations, how organisations evolve, how workflows break down, and on building scalable solutions.

I help organisations redesign workflows, operations, and knowledge systems for the AI era. All things: systems thinking, operational design, AI-era workflows, knowledge infrastructure

Visit my website → built with Carrd