Available from v1.2.0

ShimmerView

ShimmerView is an animated shimmer loading effect view that renders a placeholder overlay approximating the underlying content's structure while data fetching is in progress.

Platform availability: iOS 17.0+

When to use:

• Use ShimmerView when you need to indicate content is loading while preserving the layout structure of the expected content.
• Consider StateView when you need to display error states, empty states, or loading states with text messages.

It includes the following features:

• Animated gradient shimmer effect.
• Configurable animation speed and repeat count.
• Option to hide when stopped or remain visible.
• Support for custom styles including a plain variant.

Import

                                                        
                                                        
                                                            import BackbaseDesignSystem
                                                        
                                                            

Visual reference

Custom Shimmer View

Plain Shimmer View

API reference

ShimmerView

Properties

Initializers

init(image:style:)

Returns an image view initialized with the specified image and style.

init(image:disableAnimations:style:)

Returns an image view initialized with the specified image, animation control, and style.

init(image:)

Returns an image view initialized with the specified image using the default style.

Methods

• startAnimating()
• Starts the shimmering animation of the view.
• stopAnimating()
• Stops the shimmering animation of the view.
• startShimmering(speed:repeatCount:)
• Starts the shimmering animation with configurable parameters.

stopShimmering()

Stops the shimmering animation of the view.

Usage

Basic usage

Create a shimmer view with default configuration:

                                                        
                                                        
                                                            let view = ShimmerView(image: UIImage(named: "shimmer-image"))
                                                        
                                                        view.startAnimating()
                                                        
                                                        view.stopAnimating()
                                                        
                                                            

Plain or custom style

Use the plain style or provide a custom style:

                                                        
                                                        
                                                            let view = ShimmerView(image: UIImage(named: "shimmer-image"), style: DesignSystem.shared.styles.shimmerViewPlain)
                                                        
                                                            

Show image when not animating

Keep the image visible even when animation is stopped:

                                                        
                                                        
                                                            let view = ShimmerView(image: UIImage(named: "shimmer-image"))
                                                        view.hidesWhenStopped = false
                                                        
                                                            

Custom animation parameters

Configure animation speed and repeat count:

                                                        
                                                        
                                                            let view = ShimmerView(image: UIImage(named: "shimmer-image"))
                                                        view.startShimmering(speed: 2.0, repeatCount: 5)
                                                        
                                                            

Customization

Styling

Disabling animations for testing

For debug and snapshot testing purposes, disable the animations:

                                                        
                                                        
                                                            DesignSystem.shared.styles.shimmerView = DesignSystem.shared.styles.shimmerView <> { view in
                                                            view.disableAnimations = true
                                                        }
                                                        
                                                        DesignSystem.shared.styles.shimmerViewPlain = DesignSystem.shared.styles.shimmerViewPlain <> { view in
                                                            view.disableAnimations = true
                                                        }
                                                        
                                                            

Accessibility

This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.

Accessibility configuration

Best practices

• Set accessibilityLabel to communicate the loading state to screen readers.
• Use descriptive labels that indicate what content is loading.

                                                        
                                                        
                                                            let shimmerView = ShimmerView(image: UIImage(named: "placeholder"))
                                                        shimmerView.accessibilityLabel = "Loading content"
                                                        
                                                            

Dependencies

• External dependencies: None
• Internal dependencies: None

Design tokens

Component styling is applied automatically through the design system's theming infrastructure.

JSON tokens

This component uses semantic tokens only. See Semantic tokens below.

Semantic tokens

These tokens are accessed via the public DesignSystem.shared API.

See also

• StateView - For displaying loading failure or empty states