This example shows how we can use the WhileBusy trigger to display meaningful visual feedback while a large image is loading. We use the WhileBusy trigger on our thumbnail images to display a gray rectangle until the thumbnails arrive. We use the same technique to animate between low and high resolution images to get quicker feedback while loading.

	var Images = require("images");

	// on app startup, select the first image to initiate the high quality image loading

	module.exports = {
		thumbs: Images.thumbs,
		selectImage: Images.selectImage,
		highQualityImage: Images.highQualityImage,
		lowQualityImage: Images.lowQualityImage


		<ScrollView Dock="Top" AllowedScrollDirections="Horizontal">
			<StackPanel Padding="5" ItemSpacing="5" Orientation="Horizontal">
				<Each Items="{thumbs}">
					<Image Url="{low}" Width="50" Height="50" Clicked="{selectImage}" StretchMode="UniformToFill" MemoryPolicy="UnloadUnused">
							<Rectangle Color="#EEE">
								<Stroke Width="1" Color="#CCC" />
						<WhileFalse Value="{selected}">
							<Desaturate Amount="1" />

		<Panel Dock="Fill" Margin="5,0,5,5" ClipToBounds="true">
				<Image ux:Name="lowQualityImage" Url="{lowQualityImage}" StretchMode="UniformToFill" MemoryPolicy="UnloadUnused">
					<Desaturate Amount="1" />
						<Change lowQualityImage.Opacity="0" Duration="0.35"/>
			<Image Url="{highQualityImage}" StretchMode="UniformToFill" MemoryPolicy="UnloadUnused" />