Usage Metrics Dashboard: Add loading spinners to outputs (#136)

* add loading spinners to the app

* update snapshot

* update manifest

Author: toph-allen

extensions/usage-metrics-dashboard/app.R

@@ -9,11 +9,17 @@ library(lubridate)
 library(reactable)
 library(ggplot2)
 library(plotly)
+library(shinycssloaders)
 
 shinyOptions(
   cache = cachem::cache_disk("./app_cache/cache/", max_age = 60 * 60)
 )
 
+options(
+  spinner.type = 1,
+  spinner.color = "#7494b1"
+)
+
 source("get_usage.R")
 source("integrations.R")
 
@@ -38,7 +44,7 @@ bar_chart <- function(
   value,
   max_val,
   height = "1rem",
-  fill = "#00bfc4",
+  fill = "#7494b1",
   background = NULL
 ) {
   width <- paste0(value * 100 / max_val, "%")
@@ -201,7 +207,7 @@ ui <- function(request) {
     div(
       id = "multi_content_table",
       textOutput("summary_text"),
-      reactableOutput("content_usage_table")
+      withSpinner(reactableOutput("content_usage_table"))
     ),
 
     # The single-content detail view is displayed when an item is selected,
@@ -229,7 +235,11 @@ ui <- function(request) {
             "Daily Visits",
             div(
               style = "height: 300px",
-              plotlyOutput("daily_visits_plot", height = "100%", width = "100%")
+              withSpinner(plotlyOutput(
+                "daily_visits_plot",
+                height = "100%",
+                width = "100%"
+              ))
             )
           ),
           tabPanel(
@@ -250,11 +260,11 @@ ui <- function(request) {
                 "Click a row to show only that user's visits."
               )
             ),
-            reactableOutput("aggregated_visits")
+            withSpinner(reactableOutput("aggregated_visits"))
           ),
           tabPanel(
             "List of Visits",
-            reactableOutput("all_visits")
+            withSpinner(reactableOutput("all_visits"))
           )
         )
       )
@@ -1145,7 +1155,10 @@ server <- function(input, output, session) {
 
     height_px <- n_users * row_height + label_buffer + toolbar_buffer
 
-    plotlyOutput("visit_timeline_plot", height = paste0(height_px, "px"))
+    withSpinner(plotlyOutput(
+      "visit_timeline_plot",
+      height = paste0(height_px, "px")
+    ))
   })
 
   # Global UI elements ----

extensions/usage-metrics-dashboard/get_usage.R

@@ -1,5 +1,4 @@
 library(connectapi)
-library(pins)
 
 NA_datetime_ <- vctrs::new_datetime(NA_real_, tzone = "UTC")
 NA_list_ <- list(list())