Temporary pop-up message

What is the best way to display a short loading tip, let’s say for 5 seconds and then for it to disappear when loading is complete? I’ve tried annotations but for some reason they doesn’t work in my case. (I want to display the loading tip in the middle of the screen, and I’m working with map if that helps.

Try the dbc.Modal component! :slight_smile:

https://dash-bootstrap-components.opensource.faculty.ai/l/components/modal

You can either use a callback with a timer or a callback tied to some loading trigger value. Example:

  • some trigger that triggers the actual thing that needs to be done, i.e. loading the page or a button being clicked
  • some hidden div like html.Div(0,id='load-trigger-1)
  • two functions:
    • F1: do the actual loading and return a trigger value of 1 to `load-trigger-1’
    • F2: listens to same as F1, and also to children of load-trigger-1: if the callback context is F1, open the loading modal if the value is still 0 and close the loading modal if the value is 1
2 Likes

That worked, thanks!

1 Like