Loading and Layout improvements

Author: Webreaper

Damselfly.Core.ScopedServices/BaseSearchService.cs

@@ -433,10 +433,10 @@ public string SearchBreadcrumbs
     {
         get
         {
-            var hints = new List<string>();
+            var hints = SearchHints;
 
             if( hints.Any() )
-                return string.Join(", ", hints);
+                return string.Join(", ", hints.Select( x => x.Description));
 
             return "No Filter";
         }

Damselfly.Web.Client/Components/ImageBrowser/ImageGrid.razor

@@ -13,7 +13,17 @@
 <div class="imagegrid" id="scroll-area">
     @if ( !gridImages.Any() )
     {
-        <ProgressSpinner ProgressText="@ResultsMessage"/>
+        @if( NoResultsFound )
+        {
+            <div class="no-results">
+                <text>No images were found that match the filter:</text>
+                <text>@searchService.SearchBreadcrumbs</text>
+            </div>
+        }
+        else
+        {
+            <ProgressSpinner ProgressText="@ResultsMessage"/>
+        }
     }
     else
     {
@@ -87,7 +97,8 @@
 
     [Parameter] public GridImageSize CurrentGridSize { get; set; }
 
-    public string ResultsMessage { get; set; }
+    private string ResultsMessage { get; set; }
+    private bool NoResultsFound { get; set; } = true;
 
     async Task AddGroupToBasket(ImageGrouping grouping)
     {
@@ -252,13 +263,17 @@
 
     private async Task AddImagesToGrid(bool moreDataAvaiable)
     {
+        NoResultsFound = true;
+        
         if ( searchService.SearchResults.Any() )
         {
             ResultsMessage = $"Loading {searchService.SearchResults.Count()} images...";
-            StateHasChanged();
+            NoResultsFound = false;
 
             foreach( var set in searchService.SearchResults.Chunk(25) )
             {
+                StateHasChanged();
+
                 var toAdd = set.ExceptBy(gridImages.Select(x => x.ImageId), x => x).ToList();
 
                 var images = await imageCache.GetCachedImages(toAdd);
@@ -267,17 +282,13 @@
                 {
                     gridImages.AddRange(images);
                     configService.Set(ConfigSettings.LoadedImages, gridImages.Count.ToString());
-                    StateHasChanged();
                 }
             }
         }
-        else
-        {
-            ResultsMessage = $"No images were found that match the filter:\n{searchService.SearchBreadcrumbs}";
-        }
 
         // Flag the 'more' div if we loaded at least as many as we requested.
         endOfImages = !moreDataAvaiable;
+        StateHasChanged();
     }
 
 }

Damselfly.Web.Client/Components/ImageBrowser/ImageGrid.razor.css

@@ -13,6 +13,15 @@
     margin: 20px;
 }
 
+.no-results {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin-top: 20px;
+}
+
 .damselfly-searchmsg {
     display: flex;
     width: 100%;

Damselfly.Web.Client/Shared/ProgressSpinner.razor.css

@@ -1,12 +1,11 @@
 .progress-spinner {
     display: flex;
     flex-direction: column;
-    row-gap: 15px;
+    row-gap: 10px;
     align-items: center;
     justify-content: space-around;
     align-content: center;
-    margin-top: 20px;
-    margin-bottom: 20px;
     width: 100%;
+    height: 100%;
     animation: fadeIn ease 1s;
 }

Damselfly.Web.Client/wwwroot/version.js

@@ -1 +1 @@
-const CACHE_VERSION='4.2.1-20241230130224'
+const CACHE_VERSION='4.2.1-20241230143627'