Progress bar or progress notification option?

[polishdataengineer]

Is there a way to force the timer or some other component to work like a progress bar/information point?

I'm invoking some callables and need to wait a few seconds for an execution, so some information on the UI would be helpful to know that something is going on.

[polishdataengineer]

This is my current solution that works, but a separate notification component would be something I think many would need:

def callable_with_notification(state):
  """
  Trigger a callable with a custom notification
  """
  start_time = time.time()
  generation_in_progress = True
  while generation_in_progress:
    state["generation_status"] = "Generation in progress"
    # Your callable
    time.sleep(10)
    end_time = time.time()
    generation_in_progress = False
    generation_time = end_time - start_time

  state["generation_status"] = "Generation completed"
  time.sleep(3)
  state["generation_status"] = False

next we need to have a proper loader css class (defined in a custom css file):

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid red; /* Blue */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

On the UI we choose the Button component and two Text fields:

We assign the callable_with_notification to the Button:

To the first Text component we pass the custom css class:

To the second Text component we pass the state["generation_status"] variable:

and finally for those two Text components we need to change the visibility, to check the state["generation_status"] variable:

After that, we can test it by hitting our generation Button:

The spinning loader and message will appear when the Button is clicked and the callable inside is executed.

[ramedina86]

Check this out, you can use the "%" prefix in Message to get something very similar to what you made (very cool by the way).

Being in Message it's easy to switch between loading, error and success. If you don't include anything inside Message it's just hidden by default, so no need to worry about setting visibility.

#82 (comment)

I'll add creating a Progress Bar to the roadmap.