Load mods incrementally in the UI

Author: Kade-N

ModBrowser/GithubApi/GithubModSearchEngine.cs

@@ -18,20 +18,16 @@ public GithubModSearchEngine(string userAgent)
             client = new(userAgent);
         }
 
-        public async Task<List<ModListing>> SearchModsAsync(string searchTerm = "")
+        public async IAsyncEnumerable<ModListing> SearchModsAsync(string searchTerm = "")
         {
             var repos = await SearchForSporeModRepositoriesAsync(searchTerm);
 
-            var mods = new List<ModListing>();
-
             foreach (var repo in repos)
             {
                 var modListing = await GetModListingFromRepositoryAsync(repo);
                 if (modListing is not null)
-                    mods.Add(modListing);
+                    yield return modListing;
             }
-
-            return mods;
         }
 
         /// <summary>

ModBrowser/IModSearchEngine.cs

@@ -12,6 +12,6 @@ interface IModSearchEngine
         /// </summary>
         /// <param name="searchTerm">The term to search for.</param>
         /// <returns>A list of Spore mods tthat match the given search term.</returns>
-        public Task<List<ModListing>> SearchModsAsync(string searchTerm = "");
+        public IAsyncEnumerable<ModListing> SearchModsAsync(string searchTerm = "");
     }
 }

SporeCommunity.ModBrowser.Blazor/Pages/Index.razor

@@ -4,72 +4,76 @@
 <MainNavButtons />
 
 <form @onsubmit="@ExecuteSearch">
-    <input @bind="searchTerm" placeholder="Search for mods">
-    <button type="submit" disabled=@isLoading>Search</button>
+	<input @bind="searchTerm" placeholder="Search for mods">
+	<button type="submit" disabled=@isLoading>Search</button>
 </form>
 
-@if (isLoading)
+@if (errorMessage is not null)
 {
-<LoadingSpinner />
+	<p class="accent-orange">There was an error searching for mods.</p>
+	<p class="accent-orange">For help, visit the Discord above, and provide all of the information below.</p>
+	<SupportInformation />
+	<p>@errorMessage</p>
 }
-else
+else if (mods.Count == 0)
 {
-    if (errorMessage is not null)
-    {
-<p class="accent-orange">There was an error searching for mods.</p>
-<p class="accent-orange">For help, visit the Discord above, and provide all of the information below.</p>
-<SupportInformation />
-<p>@errorMessage</p>
+	<p>No mods were found. Try using different search terms.</p>
 }
-    else if (mods.Count == 0)
-    {
-<p>No mods were found. Try using different search terms.</p>
-}
-    else
-    {
-<p>Showing @mods.Count mods</p>
-@foreach (var mod in mods)
-        {
-<ModListingComponent Mod="@mod" />
+else
+{
+	<p>Showing @mods.Count mods</p>
+	@foreach (var mod in mods)
+	{
+		<ModListingComponent Mod="@mod" />
+	}
 }
-    }
+@if (isLoading)
+{
+	<LoadingSpinner />
 }
 
 @code {
-    private bool isLoading = true;
+	private bool isLoading = true;
+
+	private string? errorMessage;
 
-    private string? errorMessage;
+	private GithubModSearchEngine github = new("Spore-Community/ModBrowser");
 
-    private GithubModSearchEngine github = new("Spore-Community/ModBrowser");
+	private string searchTerm = "";
 
-    private string searchTerm = "";
+	private List<ModListing> mods = new();
 
-    private List<ModListing> mods = new();
+	protected override async Task OnInitializedAsync()
+	{
+		await ExecuteSearch();
+	}
 
-    protected override async Task OnInitializedAsync()
-    {
-        await ExecuteSearch();
-    }
+	private async Task ExecuteSearch()
+	{
+		isLoading = true;
+		mods.Clear();
+		try
+		{
+			await foreach (var mod in github.SearchModsAsync(searchTerm))
+			{
+				mods.Add(mod);
 
-    private async Task ExecuteSearch()
-    {
-        isLoading = true;
-        try
-        {
-            mods = await github.SearchModsAsync(searchTerm);
+				// When listing all mods, sort by download count
+				if (searchTerm.Length == 0)
+				{
+					mods = mods.OrderByDescending(mod => mod.DownloadCount).ToList();
+				}
 
-            // When listing all mods, sort by download count
-            if(searchTerm.Length == 0)
-            {
-                mods = mods.OrderByDescending(mod => mod.DownloadCount).ToList();
-            }
-        }
-        catch (Exception e)
-        {
-            errorMessage = e.Message;
-            Console.WriteLine("Spore Mod Browser encountered an error searching for mods. If requested, please provide the information below.");
-            Console.WriteLine(e.ToString());
-        }
-        isLoading = false;
-    }
+				// Refresh UI
+				StateHasChanged();
+			}
+		}
+		catch (Exception e)
+		{
+			errorMessage = e.Message;
+			Console.WriteLine("Spore Mod Browser encountered an error searching for mods. If requested, please provide the information below.");
+			Console.WriteLine(e.ToString());
+		}
+		isLoading = false;
+	}
 }

SporeCommunity.ModBrowser.Console/Program.cs

@@ -3,11 +3,11 @@
 
 var github = new GithubModSearchEngine("Spore-Community/ModBrowser");
 
-var mods = await github.SearchModsAsync();
+var mods = github.SearchModsAsync();
 
-Console.WriteLine($"Found {mods.Count} mods.");
+//Console.WriteLine($"Found {mods.Count} mods.");
 
-foreach (var mod in mods)
+await foreach (var mod in mods)
 {
     Console.WriteLine(mod.DisplayName+" by "+mod.Author);
 }