feat: improve visuals for searching

donderjoekel · Feb 1, 2024 · c0bbc0e · c0bbc0e
1 parent ec629cb
commit c0bbc0e
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 20 deletions.
diff --git a/src/Mangarr.Stack/Pages/Manga/Link/ContentSource.razor b/src/Mangarr.Stack/Pages/Manga/Link/ContentSource.razor
@@ -6,24 +6,30 @@
 else
 {
     <div class="border rounded p-3 overflow-hidden mb-3 content-source">
-        <p class="lead">@Item.Name</p>
-        <hr>
-        <div class="d-flex flex-row row-cols-auto overflow-auto pb-1">
+        <div class="d-flex align-items-center">
             @if (_isSearching)
             {
-                <Spinner/>
-            }
-            else if (_items.Count == 0)
-            {
-                <p class="lead">No items found</p>
+                <div class="spinner-border" role="status" style="margin-right: 1em"></div>
             }
-            else
+            <span class="lead">@Item.Name</span>
+        </div>
+        <hr>
+        <div class="d-flex flex-row row-cols-auto overflow-auto pb-1">
+            @if (_items.Count > 0)
             {
                 foreach (SearchResultItem item in _items)
                 {
                     <ContentSourceItem SearchId="@SearchId" Item="@item" SourceId="@Item.Id"/>
                 }
             }
+            else if (_isSearching)
+            {
+                <p class="lead">Searching for items...</p>
+            }
+            else if (_items.Count == 0)
+            {
+                <p class="lead">No items found</p>
+            }
         </div>
     </div>
 }
diff --git a/src/Mangarr.Stack/Pages/Manga/Link/ContentSource.razor.cs b/src/Mangarr.Stack/Pages/Manga/Link/ContentSource.razor.cs
@@ -11,6 +11,7 @@ namespace Mangarr.Stack.Pages.Manga.Link;
 
 public partial class ContentSource
 {
+    private static Dictionary<string, CancellationTokenSource> _cancellationTokens = new();
     private readonly List<SearchResultItem> _items = new();
     private string? _customSearchQuery = string.Empty;
     [Notify] private bool _isSearching;
@@ -31,27 +32,35 @@ protected override void OnParametersSet()
             return;
         }
 
-        SearchAsync();
+        if (!_cancellationTokens.TryGetValue(Item.Id, out CancellationTokenSource? _cts))
+        {
+            _cts = new CancellationTokenSource();
+            _cancellationTokens.Add(Item.Id, _cts);
+        }
+
+        _cts.Cancel();
+        _cts = new CancellationTokenSource();
+        SearchAsync(_cts.Token);
         _customSearchQuery = CustomSearchQuery;
     }
 
-    private async void SearchAsync()
+    private async void SearchAsync(CancellationToken ct = default)
     {
         IsSearching = true;
 
         if (!string.IsNullOrEmpty(CustomSearchQuery))
         {
-            await SearchByCustom();
+            await SearchByCustom(ct);
         }
         else
         {
-            await SearchById();
+            await SearchById(ct);
         }
 
         IsSearching = false;
     }
 
-    private async Task SearchByCustom()
+    private async Task SearchByCustom(CancellationToken ct = default)
     {
         ISource? source = SourceProvider.GetById(Item.Id);
 
@@ -61,7 +70,12 @@ private async Task SearchByCustom()
             return;
         }
 
-        Result<SearchResult> result = await source.Search(CustomSearchQuery!);
+        Result<SearchResult> result = await source.Search(CustomSearchQuery!, ct);
+
+        if (ct.IsCancellationRequested)
+        {
+            return;
+        }
 
         if (result.IsFailed)
         {
@@ -73,7 +87,7 @@ private async Task SearchByCustom()
         _items.AddRange(result.Value.Items);
     }
 
-    private async Task SearchById()
+    private async Task SearchById(CancellationToken ct = default)
     {
         ISource? source = SourceProvider.GetById(Item.Id);
 
@@ -87,6 +101,11 @@ private async Task SearchById()
 
         Result<Media?> mediaResult = await AniListApi.GetMedia(SearchId);
 
+        if (ct.IsCancellationRequested)
+        {
+            return;
+        }
+
         if (mediaResult.IsFailed)
         {
             // TODO: Handle
@@ -105,18 +124,23 @@ private async Task SearchById()
 
         foreach (string title in titlesToSearch)
         {
-            Result<SearchResult> searchResult = await source.Search(title);
+            Result<SearchResult> searchResult = await source.Search(title, ct);
 
             if (searchResult.IsFailed)
             {
                 // TODO: Handle
                 continue;
             }
 
+            if (ct.IsCancellationRequested)
+            {
+                break;
+            }
+
             allSearchResults.AddRange(searchResult.Value.Items);
+            _items.Clear();
+            _items.AddRange(allSearchResults.Distinct());
+            await InvokeAsync(StateHasChanged);
         }
-
-        _items.Clear();
-        _items.AddRange(allSearchResults.Distinct());
     }
 }