Shimmer — Shimmer • shiny.fluent

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) {}
  )
}