Ensure Shiny graphs only load once in shinyMobile f7Tab

Question

I'm using the awesome shinyMobile package to create a mobile app. It has 4 tabs (f7Tab()), including a dashboard tab where I load all my charts. The idea is to load the charts when the user shifts to the tab so they don't slow down the initial app load, but also ONLY LOAD THE GRAPHS ONCE unless an input is triggered.

Here is a sample of my server code (there are multiple graphs like this):

# Reactively render timeseries graph
observe({
  # Check which tab is opened (tab label should be 'Dashboard')
  if (reactiveVal(input$mainTabs)() == 'Dashboard') {
    output$tseriesGraph <- renderPlotly({
      tseries_basic(input$tseriesVar)
    })
  }
})

And the corresponding UI code:

    # Timeseries plots
    f7AccordionItem(
      id='tseriesAccord',
      title='Timeseries of individual variables',
      
      # Choose var to plot
      f7Select(
        'tseriesVar', 
        'Choose variable to plot:', 
        selected=chosen_vars[1], 
        choices=chosen_vars
      ),
      
      br(),
      
      withSpinner(plotlyOutput("tseriesGraph",
                               height='350px')
      )
    )

As it stands, every time the user switches back to the Dashboard tab, all of the graphs get reloaded by the server, even if they were previously loaded. How can I prevent Shiny from reloading these graphs unnecessarily?

(Also, out of curiosity, is there any way to get the graphs to load when the f7AccordionItem with id=tseriesAccord is loaded? Doesn't seem to be an id argument for this function.)

Thanks very much!

Answer 1

I ended up finding a workaround: use f7Accordion id to determine whether the graph should load or not. So don't even need to use the code to check whether my Dashboard was open. I needed to use the 'state' object, which shows as TRUE or FALSE depending on whether the f7AccordionItem under f7Accordion is open.

Example:

# Server
observe(if (input$spagBasicAccord$state) {
  output$spagBasicGraph <- renderPlotly({
    spag_basic(input$spagBasicVar)
  })
})

# UI
# Basic spaghetti graph
  f7Accordion(
    id='spagBasicAccord',
    
    f7AccordionItem(
      title='Basic spaghetti graph',

      f7Select(
        'spagBasicVar',
        'Choose variable to plot:',
        selected=chosen_vars[1],
        choices=chosen_vars
      ),

      br(),

      withSpinner(plotlyOutput("spagBasicGraph",
                               height='350px')
      )
    )
  )