【R】[shiny]  図・テーブルの出力にCSS Snippetsでアニメーションをつける

# plot・table出力待機中の時間を工夫したい
![loader.png](https://qiita-image-store.s3.amazonaws.com/0/143058/a49a2100-3153-82b6-508a-ce96c4e810b4.png)

[このページ](http://projects.lukehaas.me/css-loaders)のアニメーションがshiny上で表現できます

<blockquote class="twitter-tweet" data-lang="ja"><p lang="und" dir="ltr"><a href="https://t.co/HXCIo5HlIL">pic.twitter.com/HXCIo5HlIL</a></p>&mdash; sasaki_K_sasaki (@sasaki_K_sasaki) <a href="https://twitter.com/sasaki_K_sasaki/status/920236972563513344?ref_src=twsrc%5Etfw">2017年10月17日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

## はいけい

shinyで```plotOutout```や```dataTableOutput```などで出力するときに、inputに応じてdplyrなどで数行の集計処理をしてから表示するケースが自分は多いのですが、**出力までに画面が固まったような感じになってしまう**ことがあります。小さなことですが、それだけでページの品質が下がってしまう気がして、何かいい方法ないかなと探していました。

## 解決策

[Add CSS loader animations to Shiny outputs](https://github.com/andrewsali/shinycssloaders)に素晴らしいパッケージがありました！

今まで作ったplotOutputを含むshinyのコードにたった1行加えるだけで、出力待機中の時間を```loader```のアニメーションを表示させて間をもたせることができます！

以下でパッケージをダウンロードしてください。

```r:console
# devtools・dplyrが必要です

if(!require("devtools")){
  install.packages("devtools")
}
if(!require("dplyr")){
  install.packages("dplyr")
}

# 目的のパッケージをインストール
devtools::install_github('andrewsali/shinycssloaders')

library(shinycssloaders)

```

これで準備は整ったと思います。

実際にshiny appに組み込んでいきましょう！
使い方はとっても簡単で、```plotOutout```や```dataTableOutput```にパイプ(```%>%```)で以下のように加えるだけです！

```r:console

plotOutput("my_plot") %>% withSpinner()


```
実際にshiny appを起動して試してみてください。

## demo

```r:console.R
library(shinycssloaders)
library(shiny)
library(dplyr)

runApp(
  list(
    ui = fluidPage(
      # 色を指定
      options(spinner.color="#0dc5c1"),
      titlePanel('Downloading Data'),
      sidebarLayout(
        sidebarPanel(
          selectInput("dataset", "Choose a dataset:", 
                      choices = c("choice1", "choice2", "choice3"),
                      selected = "choice1")
        ),
        mainPanel(
          tableOutput('table') %>% 
            # type = 1 ~ 8を指定
            withSpinner(type = 8
                        # type = 2,3の場合、背景色の指定が必要
                        #color.background = "white"
                        )
        )
      )
    ),
    server = function(input, output) {
      
        datasetInput <- reactive({
          Sys.sleep(1.8)
          switch(input$dataset,
                 "choice1" = quakes %>% head(),
                 "choice2" = USArrests %>% head(),
                 "choice3" = airquality %>% head())
        })
        output$table <- renderTable({
          datasetInput()
        })

      }
  )
)

```

イメージ

![loader image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/6fa76316-45c9-f346-fd80-16974af43c3d.png)


実行していただくと、上図のように```Sys.sleep(1.8)```で1.8秒処理が停止している間に、Snnipetが回ってそれっぽくなってくれているのがわかると思います。Snnipetの種類を変更したいときは、以下の箇所で数字を変更してもう一度試してみてください！

```r:console.R
# type = 1 ~ 8を指定
withSpinner(type = 8
            # type = 2,3の場合、背景色の指定が必要
            # color.background = "white"
            )
```

たった数行でshiny appが少しだけ洗練されます！


# 参考

[最初の画像のリンク](https://projects.lukehaas.me/css-loaders/)
[Add CSS loader animations to Shiny outputs](https://github.com/andrewsali/shinycssloaders)