mcpField
S
syncfusion-maui-toolkit-shimmer

syncfusion-maui-toolkit-shimmer

github.com/syncfusionDesign & UI3945 installsUpdated 7w ago
Repository

About syncfusion-maui-toolkit-shimmer

A guide for .NET MAUI developers implementing Syncfusion SfShimmer to show animated placeholders during loading. It covers built-in layouts, custom views, and controls for wave animation and color.

Key features

  1. 01Seven built-in placeholder layouts
  2. 02Custom views built from shapes
  3. 03Wave direction, width, and duration settings
  4. 04Background and highlight color settings
  5. 05Switching between placeholder and loaded content

Use cases

  1. 01Show skeleton screens while data loads
  2. 02Use content-shaped animation instead of a spinner
  3. 03Match placeholder layouts to an interface
  4. 04Adjust loading animation direction and speed

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-shimmer

After installing, type/syncfusion-maui-toolkit-shimmerin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
built-in-views.md
custom-views.md
customization.md
getting-started.md

Details

From the project README

Implementing .NET MAUI Shimmer (SfShimmer)

SfShimmer displays an animated shimmer placeholder while content loads in the background, improving perceived app responsiveness. It supports 7 built-in layout types, fully custom views using ShimmerView shapes, and extensive wave animation customization.

When to Use This Skill

Use this skill when users need to:

  • Add a loading placeholder before data or content is fetched
  • Show a skeleton screen while an API call completes
  • Replace a spinner with a content-shaped loading animation
  • Customize shimmer colors, wave direction, or animation speed
  • Build a custom shimmer layout that mirrors your actual UI

Component Overview

The SfShimmer control provides:

  • Built-in Layout Types: 7 pre-designed shimmer patterns (CirclePersona, SquarePersona, Profile, Article, Video, Feed, Shopping)
  • Custom View Support: Build custom shimmer layouts using ShimmerView with Circle, Rectangle, and RoundedRectangle shapes
  • Wave Animation Control: Configurable wave direction (5 options), width, and animation duration
  • Color Customization: Independent Fill (background) and WaveColor (highlight) properties
  • Repeat Patterns: RepeatCount property for vertical stacking of shimmer layouts
  • Content Toggle: IsActive property for seamless switching between shimmer and loaded content
  • Flexible Integration: Works with any .NET MAUI View as child content
  • Performance Optimized: Lightweight animation that improves perceived app responsiveness

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

  • Installing Syncfusion.Maui.Toolkit NuGet package
  • Registering the handler in MauiProgram.cs
  • Adding SfShimmer in XAML and C#
  • Toggling between shimmer and content with IsActive
Built-in View Types

📄 Read: references/built-in-views.md

  • 7 built-in ShimmerType values: CirclePersona, SquarePersona, Profile, Article, Video, Feed, Shopping
  • Setting the Type property in XAML and C#
  • Default type and when to choose each layout
Custom Views

📄 Read: references/custom-views.md

  • Building a custom shimmer layout with CustomView and BoxView
  • Using ShimmerView with ShapeType (Circle, Rectangle, RoundedRectangle)
  • Full XAML and C# examples for complex custom layouts
Customization & Animation

📄 Read: references/customization.md

  • Fill — shimmer background color
  • WaveColor — shimmer highlight color
  • WaveWidth — width of the wave highlight
  • WaveDirection — 5 directions (Default, LeftToRight, RightToLeft, TopToBottom, BottomToTop)
  • RepeatCount — repeat the shimmer pattern vertically
  • AnimationDuration — control animation speed in milliseconds

Comments

Markdown supported