Entry list - Show icons

Workshop search - Show icons, update design

src/Artemis.UI/Screens/Workshop/Entries/EntryListView.axaml

@@ -14,7 +14,8 @@
             CornerRadius="8"
             HorizontalAlignment="Stretch"
             HorizontalContentAlignment="Stretch" 
-            Command="{CompiledBinding NavigateToEntry}">
+            Command="{CompiledBinding NavigateToEntry}"
+            IsVisible="{CompiledBinding Entry, Converter={x:Static ObjectConverters.IsNotNull}}">
         <Grid ColumnDefinitions="Auto,*,Auto">
             <!-- Icon -->
             <Border Grid.Column="0"
@@ -25,7 +26,10 @@
                     Width="80"
                     Height="80"
                     ClipToBounds="True">
-                <Image Source="{CompiledBinding EntryIcon^}" Stretch="UniformToFill"/>
+                <Image Source="{CompiledBinding EntryIcon}" 
+                       Stretch="UniformToFill" 
+                       Classes="fade-in"
+                       Classes.faded-in="{CompiledBinding EntryIcon, Converter={x:Static ObjectConverters.IsNotNull}}" />
             </Border>
             
             <!-- Body -->

src/Artemis.UI/Screens/Workshop/Entries/EntryListViewModel.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Reactive;
+using System.Reactive.Disposables;
 using System.Reactive.Linq;
 using System.Threading;
 using System.Threading.Tasks;
@@ -15,19 +16,26 @@ namespace Artemis.UI.Screens.Workshop.Entries;
 public class EntryListViewModel : ActivatableViewModelBase
 {
     private readonly IRouter _router;
-    private readonly ObservableAsPropertyHelper<Bitmap?> _entryIcon;
+    private readonly IWorkshopService _workshopService;
+    private ObservableAsPropertyHelper<Bitmap?>? _entryIcon;
 
     public EntryListViewModel(IGetEntries_Entries_Items entry, IRouter router, IWorkshopService workshopService)
     {
         _router = router;
+        _workshopService = workshopService;
 
         Entry = entry;
-        EntryIcon = workshopService.GetEntryIcon(entry.Id, CancellationToken.None);
         NavigateToEntry = ReactiveCommand.CreateFromTask(ExecuteNavigateToEntry);
+        
+        this.WhenActivated(d =>
+        {
+            _entryIcon = Observable.FromAsync(GetIcon).ToProperty(this, vm => vm.EntryIcon);
+            _entryIcon.DisposeWith(d);
+        });
     }
 
     public IGetEntries_Entries_Items Entry { get; }
-    public Task<Bitmap?> EntryIcon { get; }
+    public Bitmap? EntryIcon => _entryIcon?.Value;
     public ReactiveCommand<Unit, Unit> NavigateToEntry { get; }
 
     private async Task ExecuteNavigateToEntry()
@@ -46,4 +54,12 @@ public class EntryListViewModel : ActivatableViewModelBase
                 throw new ArgumentOutOfRangeException();
         }
     }
+    
+    private async Task<Bitmap?> GetIcon(CancellationToken cancellationToken)
+    {
+        // Take at least 100ms to allow the UI to load and make the whole thing smooth
+        Task<Bitmap?> iconTask = _workshopService.GetEntryIcon(Entry.Id, cancellationToken);
+        await Task.Delay(100, cancellationToken);
+        return await iconTask;
+    }
 }