🧪 [Experiment] Shimmer

[niels9001]

Approved from Discussion

https://github.com/CommunityToolkit/Labs-Windows/discussions/381

Problem Statement

A way to indicate to the user that certain parts of the screen are loading.

Overview

This experiment adds the following components:

• Shimmer: a loading indication control

Using

You can try it out via the NuGet Packages here:

UWP https://dev.azure.com/dotnet/CommunityToolkit/_artifacts/feed/CommunityToolkit-Labs/NuGet/CommunityToolkit.Labs.Uwp.Shimmer WinUI 3 https://dev.azure.com/dotnet/CommunityToolkit/_artifacts/feed/CommunityToolkit-Labs/NuGet/CommunityToolkit.Labs.WinUI.Shimmer

Read more about Preview Packages here.

Code

<labs:Shimmer Width="96" Height="96" />

Result

Docs & samples https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/Shimmer/samples

Additional info

TO DO

• [ ] Add sample of using an ItemSelector to swap out a loading template with the loaded content.

FUTURE

• It'd be really cool to investigate if we could make this easier to use, though I think that'll have to be an 8.1 thing, and this is basically just the raw component that knows how to fill a space and shimmer, eh?
• Can we skip the XAML resource file and do something with a ContentPresenter or make it attachable to an UI element (like AttachedShadow?

Implementation Requirements

• [X] Working Prototype
• [X] Feature Complete
• [X] Documentation
• [X] Samples
• [ ] Unit Tests
• [ ] Community Feedback / Usage Testimonies

Tested Platforms

• [X] UWP
• [X] WinAppSDK / WinUI 3
• [ ] Web Assembly (WASM)
• [ ] Android
• [ ] iOS
• [ ] MacOS
• [ ] Linux / GTK

Technical Review

• [ ] Accessibility Audit
• [ ] API/Naming Review
• [ ] Code Quality/Style
• [ ] Dependency Review
• [ ] Design/Style Review
• [ ] Final Approval

Community Help?

Yes

[dpaulino]

I'm using this and it works great. Question tho: how to make a perfectly round shimmer?

[JohnnyWestlake]

Suggestion: turn this into a Brush instead, allowing all instances to share the same internal composition animation and brush to optimise performance and resource usage (rather than every single usage creating it's own brushes and animations).

Logic and internal implementation would largely stay the same.