[Feature] Adding Shimmer effect and Blur images when we waiting loading resources from the server

[AbdAlghaniAlbiek]

Describe the problem this feature would solve

Hi, first of all, I noticed that new Microsoft Store have Shimmer effect when loading the resources from the server so I was so excited for this, then I searched libs that makes shimmer effect libs for UWP apps and I figure out that all libs for xamarin (especially xamarin.Android) Unfortunately 😢

Then I thought what if the images was with large sizes that need more time to load I searched about concepts about this then I figure out that there is library is blurhash.net for making images blurry until they completely load from the server but it need a lots of work to implement => what if we made it directly in imageEx?
you can check the repo here: https://github.com/MarkusPalcer/blurhash.net

I am very much looking forward to these features in the next update
thank you all for your efforts ❤

[ghost]

Hello, 'AbdAlghaniAlbiek! Thanks for submitting a new feature request. I've automatically added a vote 👍 reaction to help get things started. Other community members can vote to help us prioritize this feature in the future!

[michael-hawker]

Thanks for filing an issue @AbdAlghaniAlbiek, I know we had a previous BlurHash issue in the past. The WinUI repo also has their Placeholder UI issue.

I'm trying to see where the effect you mention is used in the store. Do you have a screenshot from the store itself? I think there's a few different effects they're doing specific to their layout/scenario vs. something generalized that'd work for anything.

@JustinXinLiu thoughts? I'll have to see what the WinUI folks may or may not be doing on their issue.

[AbdAlghaniAlbiek]

@Arlodotexe
I searched about how we can use these blurred images . So basically it depends on storing a blurred copy of the main image in db or in cloud storage service then they follow these steps:

1. Using a stored image in the application and make as placeholder (in our case we have PlaceholderSource in ImageEx)
2. Then loading the stored blurred image and it replace the existing placeholder image (so we need here a property like BlurredImageSource)
3. The last step is loading the main image ( in Source property of course)
4. If there is any error in loading main image from the server and in case the blurred image isn't loaded as well, the placeholder image will fill the gap otherwise the blurred image will have a higher priority and it will replace the placeholder image if the main image doesn't loaded.

[AbdAlghaniAlbiek]

https://twitter.com/RudyHuyn/status/1418337096587042819?s=19

@michael-hawker
You can see here how shimmer effect looks like in Microsoft store

[Arlodotexe]

@michael-hawker I'm wondering if we should move this into Labs as a generic XAML Control, rather than a feature of ImageEx?

[michael-hawker]

Yeah, moved this issue to the Labs repo. The store app has an effect like this. It's on the list to add to the Toolkit after we move the animation transition helper here from the main toolkit. Probably in another month or two after we get the hotfix out for the Toolkit and shore up Labs a bit, we can engage with the team to bring it in.