daattali / shinycssloaders

⌛ Add loading animations to a Shiny output while it's recalculating
https://daattali.com/shiny/shinycssloaders-demo/
Other
395 stars 45 forks source link

When faceting using ggplot you can glimpse the spinners in the empty space left between the different subplots #5

Closed lvalnegri closed 7 years ago

andrewsali commented 7 years ago

It would be very helpful if you could provide a minimal reproducible example, as I cannot recreate this issue. Also, can you please provide information regarding:

The example below works fine for me:

https://gist.github.com/andrewsali/5bb760d046a99eefac14521823a791e9

lvalnegri commented 7 years ago

Hi Andrew, thanks for your quick reply. Actually, I now reckon that the problem I have is probably just mine, and possibly due to a combination of packages I use in my app, which has got quite complex. I discovered your package quite later in the development, so it's difficult to tell the culprit. I started to build this simple app http://datamaps.co.uk:3838/test_shinycssloader/, and everything looks fine, and will add until I reach the trigger point and reproduce the problem (the top plot is ggplot, the other is ggiraph, the extension I use) Meanwhile, I can only attach a screenshot to hopefully let you understand what I mean. You can see the spinner between the two chart that stays there spinning :-( I'll let you know as soon as I find something test_shinycssloader Cheers, Luca

andrewsali commented 7 years ago

Looking at the live example you provided, I think the issue for the ggiraph plot is that you don't pass a "shiny output" to withSpinner, but you instead wrap it into an extra div() first. If you remove the unnecessary div() I think it will work fine.

Let me know if this fixes the issue.

lvalnegri commented 7 years ago

Got it! There's a theme(plot.background = element_blank()) in the function that styles the final chart, but the unfortunate outcome happens only with the ggiraph extension. I added an option in the app if you want to have a look at how it looks. I guess I have to handle it by myself in some way, even if I'd be eager to know the reason. Possibly, as you said, the ggiraph call add some div that causes troubles. Thanks anyway. Luca

andrewsali commented 7 years ago

Interestingly I don't get an extra div when I try an example with ggiraph, even if I add a void background. Would you mind just pasting in those few lines of R code where you generate the ggiraph plot?

I would be curious to see what might be the reason for that extra troublesome div in your app.

lvalnegri commented 7 years ago

I actually don't add any div, it's just a plain call This is the whole app, anyway, nothing fancy. I've just got rid of the whole styling, it doesn't affect the problem.

pkg <- c('data.table', 'ggplot2', 'ggiraph', 'shiny', 'shinycssloaders')
invisible( lapply(pkg, require, character.only = TRUE) )
options(spinner.color = '#e5001a', spinner.size = 1, spinner.type = 4)
dt <- fread('https://raw.githubusercontent.com/lvalnegri/whatever/master/test_shinycssloader.csv')
ui <- fluidPage(
    sidebarPanel(
        radioButtons('rdb_grp', 'FACETS:', choices = c('none', 'grid', 'wrap'), selected = 'grid', inline = TRUE ),
        conditionalPanel("input.rdb_grp == 'wrap'",
            radioButtons('rdb_wrp', 'VS:', choices = c('gender', 'smoker'), inline = TRUE )
        ),
        checkboxInput('chk_bkg', 'VOID BACKGROUND', value = FALSE)
    ),
    mainPanel(
        withSpinner( plotOutput('out_ggplt') ),
        withSpinner( ggiraphOutput('out_ggiplt') )
    )
)
server <- function(input, output) {
    gg <- reactive({
        g <- ggplot(dt, aes(x = X, y = Y))  
        if(input$rdb_grp == 'grid')
            g <- g + facet_grid(G1~G2)
        if(input$rdb_grp == 'wrap')
            if(input$rdb_wrp == 'gender'){
                g <- g + facet_wrap(~G1)
            } else {            
                g <- g + facet_wrap(~G2)
            }
        if(input$chk_bkg) return(g + theme(plot.background  = element_blank()))
        g
    })
    output$out_ggplt <- renderPlot({ gg() + geom_bar(stat = 'identity') })
    output$out_ggiplt <- renderggiraph({ 
        ggiraph( code = { print( gg()+ geom_bar_interactive(stat = 'identity') ) } )
    })
}
shinyApp(ui = ui, server = server)
andrewsali commented 7 years ago

I could reproduce the issue with ggiraph version 0.3.3, but not anymore with 0.4.0, so I guess they fixed the extra div issue.

Can you try updating ggiraph from CRAN and see if the problem goes away?

lvalnegri commented 7 years ago

Done! Thanks! I'll close the issue then.