Shimmer is a temporary animation placeholder for when a service call takes time to return data and we don't want to block rendering the rest of the UI.

If a smooth transition from Shimmer to content is desired, wrap the content node with a Shimmer element and use the isDataLoaded prop to trigger the transition. In cases where the content node is not wrapped in a Shimmer, use the shimmerElements or customElementsGroup props, and once data arrives, manually replace the Shimmer UI with the intended content. See the examples below for reference.

For more details and examples visit the official docs. The R package can not handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

Shimmer(...)

ShimmerElementsGroup(...)

ShimmeredDetailsList(...)

Arguments

backgroundColor

string
Defines the background color of the space in between and around shimmer elements.

flexWrap

boolean
Optional boolean for enabling flexWrap of the container containing the shimmerElements.

rowHeight

number
Optional maximum row height of the shimmerElements container.

borderStyle

IRawStyle
Use to set custom styling of the shimmerLine borders.

height

number
Sets the height of the rectangle.

ariaLabel

string
Localized string of the status label for screen reader

className

string
Additional CSS class(es) to apply to the Shimmer container.

componentRef

IRefObject<IShimmer>
Optional callback to access the IShimmer interface. Use this instead of ref for accessing the public methods and properties of the component.

customElementsGroup

React.ReactNode
Custom elements when necessary to build complex placeholder skeletons.

isDataLoaded

boolean
Controls when the shimmer is swapped with actual data through an animated transition.

shimmerColors

IShimmerColors
Defines an object with possible colors to pass for Shimmer customization used on different backgrounds.

shimmerElements

IShimmerElement[]
Elements to render in one line of the Shimmer.

styles

IStyleFunctionOrObject<IShimmerStyleProps, IShimmerStyles>
Call to provide customized styling that will layer on top of the variant rules.

theme

ITheme
Theme provided by High-Order Component.

width

number | string
Sets the width value of the shimmer wave wrapper.

Examples

library(shiny.fluent)

if (interactive()) {
  shinyApp(
    ui = tagList(
      div(
        p("Basic Shimmer with no elements provided. It defaults to a line of 16px height."),
        Shimmer(),
        Shimmer(width = "75%"),
        Shimmer(width = "50%")
      ),
      tags$head(tags$style(
        ".ms-Shimmer-container { margin: 10px 0 }"
      ))
    ),
    server = function(input, output) {}
  )
}