Run bitmap loading on thread pool instead of the UI thread. This significantly reduces lag when there is a lot of images.

Author: jobmarley

AsyncImageLoader.Avalonia/AdvancedImage.axaml.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Threading;
+using System.Threading.Tasks;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
@@ -176,35 +177,51 @@ protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs chang
 
     private async void UpdateImage(string? source, IAsyncImageLoader? loader)
     {
-        _updateCancellationToken?.Cancel();
-        _updateCancellationToken?.Dispose();
-        var cancellationTokenSource = _updateCancellationToken = new CancellationTokenSource();
-        IsLoading = true;
-        CurrentImage = null;
-
-        Bitmap? bitmap = null;
-        if (source != null)
-        {
-            // Hack to support relative URI
-            // TODO: Refactor IAsyncImageLoader to support BaseUri 
-            try
-            {
-                var uri = new Uri(source, UriKind.RelativeOrAbsolute);
-                if (AssetLoader.Exists(uri, _baseUri)) bitmap = new Bitmap(AssetLoader.Open(uri, _baseUri));
-            }
-            catch (Exception)
-            {
-                // ignored
-            }
-
-            loader ??= ImageLoader.AsyncImageLoader;
-            bitmap ??= await loader.ProvideImageAsync(source);
-        }
-
-        if (cancellationTokenSource.IsCancellationRequested) return;
-        CurrentImage = bitmap;
-        IsLoading = false;
-    }
+		_updateCancellationToken?.Cancel();
+		_updateCancellationToken?.Dispose();
+		var cancellationTokenSource = _updateCancellationToken = new CancellationTokenSource();
+		IsLoading = true;
+		CurrentImage = null;
+
+        
+		Bitmap? bitmap = await Task.Run(async () =>
+		{
+			try
+			{
+				if (source == null)
+					return null;
+
+				// A small delay allows to cancel early if the image goes out of screen too fast (eg. scrolling)
+				// The Bitmap constructor is expensive and cannot be cancelled
+				await Task.Delay(10, cancellationTokenSource.Token);
+
+				// Hack to support relative URI
+				// TODO: Refactor IAsyncImageLoader to support BaseUri 
+				try
+				{
+					var uri = new Uri(source, UriKind.RelativeOrAbsolute);
+					if (AssetLoader.Exists(uri, _baseUri))
+                        return new Bitmap(AssetLoader.Open(uri, _baseUri));
+				}
+				catch (Exception)
+				{
+					// ignored
+				}
+
+				loader ??= ImageLoader.AsyncImageLoader;
+				return await loader.ProvideImageAsync(source);
+			}
+			catch (TaskCanceledException)
+			{
+				return null;
+			}
+		});
+
+		if (cancellationTokenSource.IsCancellationRequested)
+            return;
+		CurrentImage = bitmap;
+		IsLoading = false;
+	}
 
     private void UpdateCornerRadius(CornerRadius radius)
     {

AsyncImageLoader.Avalonia/ImageLoader.cs

@@ -1,7 +1,12 @@
 using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using System.Threading;
 using AsyncImageLoader.Loaders;
 using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Media.Imaging;
+using System.Collections.Concurrent;
 
 namespace AsyncImageLoader; 
 
@@ -22,18 +27,50 @@ static ImageLoader()
 
     public static IAsyncImageLoader AsyncImageLoader { get; set; } = new RamCachedWebImageLoader();
 
-    private static async void OnSourceChanged(Image sender, AvaloniaPropertyChangedEventArgs args) {
-        var url = args.GetNewValue<string?>();
-        SetIsLoading(sender, true);
+	private static ConcurrentDictionary<Image, CancellationTokenSource> _pendingOperations = new ConcurrentDictionary<Image, CancellationTokenSource>();
+	private static async void OnSourceChanged(Image sender, AvaloniaPropertyChangedEventArgs args) {
+		var url = args.GetNewValue<string?>();
 
-        var bitmap = url == null
-            ? null
-            : await AsyncImageLoader.ProvideImageAsync(url);
-        if (GetSource(sender) != url) return;
-        sender.Source = bitmap!;
+		// Cancel/Add new pending operation
+		CancellationTokenSource? cts = _pendingOperations.AddOrUpdate(sender, new CancellationTokenSource(),
+			(x, y) =>
+			{
+				y.Cancel();
+				return new CancellationTokenSource();
+			});
 
-        SetIsLoading(sender, false);
-    }
+		if (url == null)
+		{
+			((ICollection<KeyValuePair<Image, CancellationTokenSource>>)_pendingOperations).Remove(new KeyValuePair<Image, CancellationTokenSource>(sender, cts));
+			sender.Source = null;
+			return;
+		}
+
+		SetIsLoading(sender, true);
+
+		Bitmap? bitmap = await Task.Run(async () =>
+		{
+			try
+			{
+				// A small delay allows to cancel early if the image goes out of screen too fast (eg. scrolling)
+				// The Bitmap constructor is expensive and cannot be cancelled
+				await Task.Delay(10, cts.Token);
+
+				return await AsyncImageLoader.ProvideImageAsync(url);
+			}
+			catch (TaskCanceledException)
+			{
+				return null;
+			}
+		});
+
+		if (bitmap != null && !cts.Token.IsCancellationRequested)
+			sender.Source = bitmap!;
+
+		// "It is not guaranteed to be thread safe by ICollection, but ConcurrentDictionary's implementation is. Additionally, we recently exposed this API for .NET 5 as a public ConcurrentDictionary.TryRemove"
+		((ICollection<KeyValuePair<Image, CancellationTokenSource>>)_pendingOperations).Remove(new KeyValuePair<Image, CancellationTokenSource>(sender, cts));
+		SetIsLoading(sender, false);
+	}
 
     public static string? GetSource(Image element)
     {