Wait while queries being executed

[NicolasFabre81]

Hello,
I have a button that launches a lot of queries, taking up to 30 seconds or so.
I'm looking for sth to make the user wait without clicking, until it's done : spinner, timer on mouse pointer ...

Any ideas ?
@sourceae

[andz-bb]

hey @NicolasFabre81

you can do this using App State and Conditional UI. Here's a quick demo:

First I have set up my button actions so that before my query runs, I create a state variable loading and set it to true. Then my query runs and once it is finished I then have another step to delete the loading state.

This means that we can now conditionally render components based on that loading value which will only be true when the query is running.

The most simple example of this is that I can hide my button while it is loading by doing this:

I can then render something else in the button's place using the same conditions. I added an embed component with HTML for a Spectrum CSS spinner since all of the classes are already available in Budibase. Here's the snippet I used:

  <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate">
    <div class="spectrum-ProgressCircle-track"></div>
    <div class="spectrum-ProgressCircle-fills">
      <div class="spectrum-ProgressCircle-fillMask1">
        <div class="spectrum-ProgressCircle-fillSubMask1">
          <div class="spectrum-ProgressCircle-fill"></div>
        </div>
      </div>
      <div class="spectrum-ProgressCircle-fillMask2">
        <div class="spectrum-ProgressCircle-fillSubMask2">
          <div class="spectrum-ProgressCircle-fill"></div>
        </div>
      </div>
    </div>
  </div>

Now when I set that to conditionally show only when loading is true, the spinner replaces the button when the query is running. Here's the final result:

This is a fairly basic example but you can do a lot more using the same principles. If you don't want to hide the button another idea would be to conditionally disable the button when loading is true using the same Conditional UI drawer. Hope this helps!

[NicolasFabre81]

Great solution, thanks a lot @andz-bb
I didn't guess it because I am still not really aware of what is possible with the embed tool.
How can one find support on such things ?
Is the spectrum CSS doc the key ? https://opensource.adobe.com/spectrum-css/index.html

[andz-bb]

hey @NicolasFabre81, the Embed component allows you to use most HTML, so it's a free area for you to add any markup as a component to your app. Here's the docs page for the Embed component.

In this case for the spinner I used this example from the Spectrum CSS docs. We use Spectrum to style Budibase so those CSS classes are also available in the context of the Embed component. If you wanted to use your own CSS you could add it to the Embed component within <style> tags.

If you have any questions on this feel free to ask!

[NicolasFabre81]

Thanks, the key point to understand is what you say : " so those CSS classes are also available in the context of the Embed component"

[andz-bb]

@NicolasFabre81 In the embed component you can add HTML where you can style the elements using classes. Here's a really simple example:

<div class="my-container">
  <p class="my-text">
    hello world
  </p>
</div>

by default these will appear like this:

but I could add styling by writing CSS for those classes like so:

<style>
  .my-container {
    background: white;
  }
  .my-text {
    color: black;
    font-size: 32px;
  }
</style>

When I talk about using the Spectrum classes, what I mean is that in the Budibase builder and apps there is CSS already imported into the browser DOM that can be referenced inside our Embed component. This would not be the case for every CSS framework but because Budibase uses Spectrum CSS, we can reuse that for our own HTML. Since it is already being used in the core Budibase you don't need to import it or define it otherwise.

I hope this makes it a bit clearer for you! If you would like me to explain it in more detail let me know.

[NicolasFabre81]

I did understand at the first time, but your examples make it clearer indeed !
Maybe a good point would be to have a bit more doc about using css spectrum with bb.
Thanks again!