Skip to content
Handling longer calculations and showing progress in R Shiny
JavaScript CSS R
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
www
.gitignore
LICENCE
README.md
app.R
global.R
progess.Rproj

README.md

loading and progress

When apps have some longer calculations it is good practice to show the user an indication that the app is still up and running. This app shows an implementation of a minimalistic progress bar using NProgress and how to use 'skeleton screens' with Shiny. In this example grey boxes (that's the 'skeleton') are displayed till the data table is fully loaded to provide a nicer user experience, as used by Facebook, YouTube etc.

See it in action here

alt text

Focus

This feature focuses on improving the UX of applications by showing progress and activity to the user. We found that this can be especially useful for our Shiny apps where we need to perform calculations and process data on the fly.

How it works

Using NProgress we listen for some built in Shiny lifecycle events.

// Start NProgress when starting calculations
$(document).on('shiny:busy', function(event) {
    NProgress.start({
      showSpinner: false,
    });
});

// End NProgress when shiny goes idle 
$(document).on('shiny:idle', function(event) {
    NProgress.done();
});

Create a skeleton placeholder for your content to show while its loading

createTableSkeleton <- function() {
       div(class="skeleton",
          div(class="sk-layout sk-layout-column",
              div(class="sk-text-row skeleton-item")
          )
       )
}

Add it to your Shiny app

mainPanel(
   tableOutput("table"),
   createTableSkeleton()
)

Use :empty CSS pseudo to only show the skeleton when your content is loading

.skeleton {
  display: none;
}

.shiny-bound-output:empty + .skeleton {
  display: block;
}
You can’t perform that action at this time.