Loading animations for Shiny outputs

Background 

In the academic environment where our company Alphacruncher operates, ‚Shiny‘ – the R-language based web-application framework – has found a strong following. There is a vibrant open-source community around both the R-language and Shiny projects which has benefited the academic community tremendously. In this post we outline a small contribution we have made to this community via the R package shinycssloaders, in particular by improving the user-experience (UX) of projects leveraging on Shiny.

 

Loading animations for Shiny

 

The versatility of Shiny enables the creation of outputs (plots, tables, interactive graphics) that can depend on complex analytics. Unfortunately this also means that it can often take a non-negligible amount of time to calculate and render these outputs to the end user, during which the user might not have feedback about the status of the application. Although Shiny has some built in facilities (notably progress-bars) that one can use for situations where there is a clear concept of ‚progress‘ (e.g. a for loop), this works less-well for cases when there is a single long-running function call. In addition, the progress will be shown at a global level and will not be tied to the specific output, thereby the user might not know what output is being generated exactly.

 

Our goal was therefore to add fully automatic loading-animations (spinners) to Shiny outputs during the time which the output is being calculated. The animations automatically start when the output is being calculated and hide when a new value is recevied (or an error is returned from Shiny). The animations are based on the work of Luke Haas and provide the user with 8 different easily customizable (e.g. size, color) and visually appealing spinners. Below is an example of how the spinner behaves, you can check a live example on shinyapps.io.

 

 

 

Using the package

 

The shinycssloaders package allows the Shiny developer to add a spinner to her output with a single extra function call. For example, to add a spinner to a plot output, after loading the shinycssloaders package one would modify the UI code of the Shiny application by wrapping the Shiny output with the withSpinner function:

 

...
# e.g.plot with spinner
withSpinner(plotOutput("my_plot"))
....

 

That’s all the modifications you need to make to your code, so it’s really easy to improve user-experience!

Reporting issues

 

The shinycssloaders package is GPL-3 licensed and you can check out the code on github. Should you experience any issues, don’t hesitate to file an issue on the same page, so that we can fix it!

 

If based on the above you feel like shinycssloader might be for you, then take it for a spin! ;-)