Nice loading overlay for UI elements. You
can also set skeletonsOnLoad TRUE in the app
main options (see example) to show skeletons on load.
Usage
f7Skeleton(
target,
effect = c("fade", "blink", "pulse"),
duration = NULL,
session = shiny::getDefaultReactiveDomain()
)Arguments
- target
CSS selector on which to apply the effect. In general, you apply the effect on a wrapper such as a card, such that all nested elements receive the skeleton.
- effect
Choose between "fade", "blink" or "pulse".
- duration
Effect duration. NULL by default. If you know exactly how much time your most time consuming output takes to render, you can pass an explicit duration. In other cases, leave it to NULL.
- session
Shiny session object.
Details
This function is expected to be called from an observeEvent, you may also have to increase the observer priority (see example).
Examples
if (interactive()) {
library(shiny)
library(shinyMobile)
shinyApp(
ui = f7Page(
title = "Skeletons",
options = list(skeletonsOnLoad = TRUE),
f7SingleLayout(
navbar = f7Navbar(title = "f7Skeleton"),
f7Block(
f7Button("update", "Update card")
),
f7Card(
title = "Card header",
textOutput("test"),
),
f7List(
f7ListItem(
href = "https://www.google.com",
title = "Item 1"
),
f7ListItem(
href = "https://www.google.com",
title = "Item 2"
)
)
)
),
server = function(input, output, session) {
txt <- eventReactive(input$update,
{
Sys.sleep(3)
"This is a simple card with plain text,
but cards can also contain their own header,
footer, list view, image, or any other element."
},
ignoreNULL = FALSE
)
output$test <- renderText(txt())
observeEvent(input$update,
{
f7Skeleton(".card", "fade")
},
priority = 1000
)
}
)
}