Yang-Tang/shinyjqui

shinycssloaders compatibility

m-swirski opened this issue · 4 comments

Hi, I noticed strange behavior when combining shinyjqui in combination with shiny css_loaders.
Specifically, I use withSpinner function to display animation during wait.
Consider code snippets below:

library(shiny)
library(shinyjqui)
library(ggplot2)
library(shinycssloaders)

ui <- fluidPage(
  actionButton("go", "Go"),
  jqui_resizable(plotOutput('gg')) %>% shinycssloaders::withSpinner(color="#0dc5c1")
)

server <- function(input, output) {
  
  val <- eventReactive(input$go, mtcars)
  output$gg <- renderPlot({
    Sys.sleep(1.5)
    ggplot(val(), aes(x = cyl, y = mpg)) + geom_point()
  }
  )
}


shinyApp(ui, server)



ui <- fluidPage(
  actionButton("go", "Go"),
  jqui_resizable(plotOutput('gg') %>% shinycssloaders::withSpinner(color="#0dc5c1"))
)

server <- function(input, output) {
  
  val <- eventReactive(input$go, mtcars)
  output$gg <- renderPlot({
    Sys.sleep(1.5)
    ggplot(val(), aes(x = cyl, y = mpg)) + geom_point()
  }
  )
}

shinyApp(ui, server)

In the first example animation appears before the first go putton push, and then the plot just goes gray, with the resizing working, while in the second example spinner works just fine, while resizing stops working. The only difference is whether jqui_resizable encapsulates withSpinner function or not.

Any ideas if it's possible to fix that problem?

Thanks,
Michał

Hi @m-swirski with 2fdcabf, both of the two ways you showed should work now. Let me know if it isn't what you expected

Hi,
Thanks for attending to this issue!
I pulled the new version and tested - the first way doesn't work different (greying and no css spinner), while the second does work, but resizing is active only on horizontally, i.e. on x axis (it shrinks and expands as if options = list(handles = "e"))
Does it work the same on your end, or am I perhaps missing something?

PS.
On related note - these options = list(handles...) doesn't work as expected, so far I only managed to make it work with "e" and "n" parameters, in both cases the resizing handle disappears and one has to grab border of the resizable element.

Best,
Michal

Sorry, I forgot to update the js file. Now it should works. For the handle options, I guess it is the default behavior of jQuery UI. According to their document, you can generate your own handle with ui-resizable-handle class.

Okay, now it worked like a charm, thanks a million for helping with this!

Thanks for a tip on creating a handle, I'll experiment with this.

Best,
Michał