Getting started:

1. Add Dependency to this package in you project
2. Take the control ShimmerContainer and put inside a page.
3. Take other shimmers control and place inside the ShimmerContainer, you can use different style and ux approach, so your immagination is the limit.

UI Flows

1- ShimmerZone

UI Flow with shimmer containers

1.1 - Blocks

1.1.1- ShimmerContainer:

The main container that enable visual effect and ui style rendering.

Params:

• -UseWaveEffect: Indicate if the shimmers controls inside this container must use the wave effect otherwise the default blink/glow effect is used.
• -PrimaryColor: The container inherit the primary color of the consumer portal, but its possible to overwrite it. If Outsystem UI Theme is not used/inherit by the consumer portal Theme its possible to set the global shimmer color with these global css variable :  --color-primary
• -ShimmersOpacity: The opacity for the shimmers (value between 0 <-> 1 )
• -GlowBlinkEffectOpacity: The opacity for the dynamic ui animation (value between 0 <-> 1 ). When the UseWaveEffect is false, the standard blink effect is used. This effect alter the shimmers opacity. ( Standard transition go from 0.5 to 0.2).

1.1.2- ShimmerRepeater:

Control to replicate/clone an existing Shimmer Container for a specific number of time. ( usefull for tables,list,etc....)

Params:

• -RepetitionNumber: The number of time to repeat an existing shimmer container. IMPORTANT: This control execute some DOM cloning action into the DOM, so avoid too many ripetition.
• -TargetShimmerContainer: The target shimmer container to clone.

2- Shimmers

UI Flow with single shimmers

2.1- Blocks

2.1.1- ShimmerLine

A shimmer with solid color in background. This shimmer use the 100% of the parent width and render.

Params:

• -BorderRadius : The radius for the border.
• -IsRadiusInPercentage : Check if radius is expressed in % otherwise px.
• -AdditionalSizeClasses : Addtional css class to manage the size

2.1.2- ShimmerText

A shimmer with text content and transparent background.

Params:

• -Text: The text to render.
• -FontSize: The numeric value of the font-size
• -FontSizeUnit: The unit type to use with font-size (ex: px,em,rem...)
• -FontWeight: The weight of the font.
• -AdditionalSizeClasses : Addtional css class to manage the size

2.1.3- ShimmerImage

A shimmer with solid color background and an image in the middle. This control use the 100% preants' width and height

Params:

• -ImageUrl : The url of the image to render. If null a default image will be used.
• -BorderRadius : The radius for the border.
• -IsRadiusInPercentage : Check if radius is expressed in % otherwise px.

2.1.4 -ShimmerBlock

A shimmer with solid color in background. This control use the 100% preants' width and height

Params:

• -BorderRadius : The radius for the border.
• -IsRadiusInPercentage : Check if radius is expressed in % otherwise px.

2.1.5- ShimmerButton

A shimmer that inherit Outsystem Btn Style. The configuration allow to render a text message or preserve space within the button without rendering a text message.

Params:

• -Text: The text to render inside the button.
• -IsRenderTextEnabled: Indicate if the control must render a text. if true a visible message is rendered within the button otherwise an invisible message is rendered ( usefull to keep button width aligned )
• -AdditionalButtonClasses: Additional css classes

Note on AdditionalSizeClasses Parameter

Classes available:

shimmer-size-display

shimmer-size-heading1

shimmer-size-heading2

shimmer-size-heading3

shimmer-size-heading4

shimmer-size-heading5

shimmer-size-heading6

shimmer-size-s

shimmer-size-xs

These classes inherit the Outsystem UI Typography size ( ex: shimmer-size-display inherit font-size-display) check the official docs : https://outsystemsui.outsystems.com/OutSystemsUIWebsite/CheatSheet#section-Typography-6

Note on AdditionalButtonClasses

 the shimmer button inherit the ootb button style so its possible to use the Outsystems UI btn classes:

btn-primary

btn-cancel

btn-small

....etc

Check the documentation https://outsystemsui.outsystems.com/OutSystemsUIWebsite/CheatSheet#section-Buttons-2