Loading animations for Shiny outputs (shinycssloaders)

[Andrew Sali]

Hi Shiny Users,

It seems to have been a common request to have loading animations for Shiny outputs (e.g. plots, tables), to show the user some progress whilst calculations are running (without having to create a global progress-bar). 

Leveraging on Shiny JS events and the loading animations at https://projects.lukehaas.me/css-loaders/, I have created a mini-package called shinycssloaders that solves this tasks with requiring very minimal additional code from the Shiny developer (just wrap your output function call using the withSpinner function in the package). The animations automatically show / hide when the calculations are running / done or if the output is not generated (e.g. a req() or validate() cancels the output).

An example Shiny app to test is given at https://frontside.shinyapps.io/example/

For further information, please refer to the github page.

I hope some people will find this useful!

Cheers,

Andras

[Sebastián Flórez Parra]

The example is not working.

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discuss+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/b09a322d-d6e0-4361-a8de-de1fdfcb15dc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Sebastián Flórez Parra 

Ingeniero de Sistemas e Informática 

Universidad Nacional de Colombia 

Sede Medellín

[Andras Sali]

Please try at https://andrewsali.shinyapps.io/example/ 

I changed the account name at shinyapps.io, but it seemed it did not work - apparently it just took some time.

Thanks,

Andras

On Fri, May 5, 2017 at 4:06 PM Sebastián Flórez Parra <sebas...@gmail.com> wrote:

The example is not working.

2017-05-05 5:04 GMT-05:00 Andrew Sali <sali....@gmail.com>:

Hi Shiny Users,

It seems to have been a common request to have loading animations for Shiny outputs (e.g. plots, tables), to show the user some progress whilst calculations are running (without having to create a global progress-bar). 

Leveraging on Shiny JS events and the loading animations at https://projects.lukehaas.me/css-loaders/, I have created a mini-package called shinycssloaders that solves this tasks with requiring very minimal additional code from the Shiny developer (just wrap your output function call using the withSpinner function in the package). The animations automatically show / hide when the calculations are running / done or if the output is not generated (e.g. a req() or validate() cancels the output).

An example Shiny app to test is given at https://frontside.shinyapps.io/example/

For further information, please refer to the github page.

I hope some people will find this useful!

Cheers,

Andras

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.

To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.

[Sebastián Flórez Parra]

Awesome, Congratulations!! 

2017-05-05 9:09 GMT-05:00 Andras Sali <sali....@gmail.com>:

Please try at https://andrewsali.shinyapps.io/example/ 

I changed the account name at shinyapps.io, but it seemed it did not work - apparently it just took some time.

Thanks,

Andras

On Fri, May 5, 2017 at 4:06 PM Sebastián Flórez Parra <sebas...@gmail.com> wrote:

The example is not working.

2017-05-05 5:04 GMT-05:00 Andrew Sali <sali....@gmail.com>:

Hi Shiny Users,

It seems to have been a common request to have loading animations for Shiny outputs (e.g. plots, tables), to show the user some progress whilst calculations are running (without having to create a global progress-bar). 

Leveraging on Shiny JS events and the loading animations at https://projects.lukehaas.me/css-loaders/, I have created a mini-package called shinycssloaders that solves this tasks with requiring very minimal additional code from the Shiny developer (just wrap your output function call using the withSpinner function in the package). The animations automatically show / hide when the calculations are running / done or if the output is not generated (e.g. a req() or validate() cancels the output).

An example Shiny app to test is given at https://frontside.shinyapps.io/example/

For further information, please refer to the github page.

I hope some people will find this useful!

Cheers,

Andras

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.

To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discuss+unsubscribe@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/b09a322d-d6e0-4361-a8de-de1fdfcb15dc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Sebastián Flórez Parra 

Ingeniero de Sistemas e Informática 

Universidad Nacional de Colombia 

Sede Medellín

[Sebastián Flórez Parra]

Good Morning Andras, I have any question:

Is possible using arguments of withSpinner function set a default position, e.g in the center of window ? 

In my case is Showing on the top, and I need it in the center of Windows:

Best Regards!

​

[Joe Cheng]

Andras, this is cool! Small nit--when I re-draw Type 3, the page's vertical scrollbar is shown and then hidden. Doesn't seem to happen on the other examples, though. I'm on Chrome on Mac.

Awesome, Congratulations!! 

To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/b09a322d-d6e0-4361-a8de-de1fdfcb15dc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Sebastián Flórez Parra 

Ingeniero de Sistemas e Informática 

Universidad Nacional de Colombia 

Sede Medellín

--

Sebastián Flórez Parra 

Ingeniero de Sistemas e Informática 

Universidad Nacional de Colombia 

Sede Medellín

--

Sebastián Flórez Parra 

Ingeniero de Sistemas e Informática 

Universidad Nacional de Colombia 

Sede Medellín

--

You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.

To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/CAKxw1QqZQ62%2BKDdX6PqGjiXtkxz7xo313Qkj70r%2BhvbtVueJ-Q%40mail.gmail.com.

[Andras Sali]

@Sebastian: Apologies for the late reply, I had some travels and couldn't respond earlier. It's great question, what is happening is that you are using an output (I am guessing some sort of table or data-table) that doesn't have a fixed height. In this case the spinner doesn't know where to center itself vertically, since the server might send back something large or small, it's impossible to know ex-ante.

I have now added on github a quasi-solution that inserts a 'proxy' container in this case which you can configure to be of the height you'd like (the spinner will be centered with respect to the proxy container). The best way to go is to configure the height of the proxy to match what you would expect your output size to be in most cases (except if your outputs are really large in which case a smaller proxy is better, otherwise you won't see the spinner without scrolling). You can test it by installing the latest version from https://github.com/andrewsali/shinycssloaders and playing around with the 'proxy.height' option.

To see how this works in practice, check out: https://frontside.shinyapps.io/table/ - here I use the default height of 400px for the proxy container.

@Joe: Thanks for the report on Type 3, it should be fixed now on the github version, you can verify if the fix is working for you at: https://frontside.shinyapps.io/example/

Cheers,

Andras

[Andras Sali]

I have uploaded the latest version of the shinycssloaders package to CRAN, so if you install from there, you will automatically get the better support for variable height outputs.

Cheers,

Andras

On Thu, May 11, 2017 at 9:07 PM Andras Sali <sali....@gmail.com> wrote:

@Sebastian: Apologies for the late reply, I had some travels and couldn't respond earlier. It's great question, what is happening is that you are using an output (I am guessing some sort of table or data-table) that doesn't have a fixed height. In this case the spinner doesn't know where to center itself vertically, since the server might send back something large or small, it's impossible to know ex-ante.

I have now added on github a quasi-solution that inserts a 'proxy' container in this case which you can configure to be of the height you'd like (the spinner will be centered with respect to the proxy container). The best way to go is to configure the height of the proxy to match what you would expect your output size to be in most cases (except if your outputs are really large in which case a smaller proxy is better, otherwise you won't see the spinner without scrolling). You can test it by installing the latest version from https://github.com/andrewsali/shinycssloaders and playing around with the 'proxy.height' option.

To see how this works in practice, check out: https://frontside.shinyapps.io/table/ - here I use the default height of 400px for the proxy container.

@Joe: Thanks for the report on Type 3, it should be fixed now on the github version, you can verify if the fix is working for you at: https://frontside.shinyapps.io/example/

Cheers,

Andras

On Wed, May 10, 2017 at 1:55 AM Joe Cheng <j...@rstudio.com> wrote:

Andras, this is cool! Small nit--when I re-draw Type 3, the page's vertical scrollbar is shown and then hidden. Doesn't seem to happen on the other examples, though. I'm on Chrome on Mac.

On Tue, May 9, 2017 at 8:59 AM Sebastián Flórez Parra <sebas...@gmail.com> wrote:

Good Morning Andras, I have any question:

Is possible using arguments of withSpinner function set a default position, e.g in the center of window ? 

In my case is Showing on the top, and I need it in the center of Windows:

Best Regards!

​