How do you change the style of a div in R Shiny?

Question

I am trying to change the z-index of a loading screen which tells users the program is loading and prevents them from clicking anything that would make the process longer (once the loading is finished, all clicked areas are clicked all at once).

I currently have the following code:

loadingState <- function(bool){
  if(bool){
    print("front")
    tags$style(HTML(".loadingDiv {z-index: 1000;}"))
  }
  else{
    print("behind")
    tags$style(HTML(".loadingDiv {z-index: -1000;}"))
  }
}

The idea is I can use this function to show and hide the div. Here's the CSS stylesheet:

.loadingDiv {
  position: fixed;
  z-index: 1000;
  background-color: black; //so I can see if the div is visible or not. Will be transparent
  opacity: .2;
  width:100%;
  height:100%;
  cursor:wait;
}

note: it starts out at 1000 because several calculations begin when the program first boots up

The function I'd be using it in is like this:

laggyFunc <- function(){
  loadingState(TRUE)
  -
  - laggy code
  -
  loadingState(FALSE)
}

From some print() debugging, I found that loadingState() was running at the right times, but that the tags$style(HTML(".loadingDiv {z-index: 1000;}")) part wasn't doing anything visible to the div (it just stayed there after all loading was complete)

In summary, I wanted to know how to change loadingDiv's style. I know JavaScript can do it in HTML, but I'm unfamiliar on how JS works in r shiny (so any tutorial links would also be a nice help :D)

Thank you for reading, and I hope you have a good rest of your day :)

Answer 1

Preface: SmokeyShakers pointed me in the exact direction of this answer, I just didn't know shinyjs had to be initalized by declaring it in the ui with useShinyjs() Instead of trying to change the z-index of the div, I used these commands: shinyjs::show('loadingDiv') shinyjs::hide('loadingDiv') There is also a shinyjs::toggle() which changes the div from hide to show or show to hide ( toggles the visibility) in case you want to you that at some point

Big notes: When trying to show and hide a div, reference it's id, not class. Declare useShinyjs() in your ui for the code to work ex: ui <- tagList(useShinyjs(),includeCSS("www/stylesheet.css"), HTML("<div id='loadingDiv'></div>"), navbarPage(...))

This is my first question and answer on here, so if Smoky is supposed to get selected as the answer, then they can put up an identical answer to this and I'll select it. In the meantime I'll select this one. Thanks for all the help!