Temporary alert for application users

[justacec]

Motivation

I have a dropdown which has its dropdown options change based on other inputs. I would like to visually indicate to the user that these options have been updated. Currently, I see no non-obtrusive component that I can use to show this. The closest that I have found is the MessageBar but that has to be put in the UI and is not updateable / toggleable from the server logic.

Feature description

I would like to have a component available which can be triggered from the server logic (kind of like how we can create a JS alert popup) and have the ability to automatically disappear after a timeout period. Fading would be nice.

Implementation ideas

No response

Impact

I could use this feature in several places

Comments

If there already exists a method to do this I would be happy to implement that solution, I just do not know what that solution is.

[justacec]

I have done some digging and found a potential solution with the following code:

createMessageBar = function(messagebar, timeout = NA) {
      tmp_id = sprintf('msgbar_%i', floor(runif(1) * 1000))

      tl = tagList(
          div(id = tmp_id,
            messagebar
          )
      )

      if(!is.na(timeout)) {
        tl = tagList(
          tl,
          tags$script((HTML(sprintf('{
            let target = document.getElementById(\"%s\");
            window.setTimeout(() => target.remove(), %i);
            }
          ', tmp_id, timeout))))
        )
      }

      insertUI(
        '#MessageBar_Container',
        where = 'beforeEnd',
        ui = tl
      )
    }

    observeEvent(input$tryit, {
      createMessageBar(MessageBar("Hello World Again"), timeout = 2000)
    })

I this code, the createMessageBar function could more aptly be renamed injectTimedElement since it is general. It does depend on an empty UI div with the hard coded id of MessageBar_Container. I think this seemed to hit the mark. All of that being said, I am not sure if this is very clean. It seems kind of hackish to me and maybe there was a more elegant solution available. I look forward to see what feedback you have on the issue.