From 38343e3ea2fcb86d215571a57a164fb60a66aa0f Mon Sep 17 00:00:00 2001
From: Jason Dove <1695733+jasongdove@users.noreply.github.com>
Date: Fri, 2 Jan 2026 13:40:44 -0600
Subject: [PATCH] lazy load media card images (#2750)

---
 CHANGELOG.md                    |  3 ++-
 ErsatzTV/Shared/MediaCard.razor | 33 +++++++++++++++++++++++++--------
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7edb29811..02580ae23 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -72,7 +72,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Sequential schedules: fix `count` instruction validation to accept integer (constant) or string (expression)
 - Fix multi-part episode grouping logic so that it does NOT require release date metadata for episodes within a single show
   - When **Treat Collections As Shows** is enabled (i.e. for crossover episodes) release date metadata is required for proper grouping
-- Fix *many* cases of duplicate names; enforce case-insensitive unique names at the schema level
+- Fix *many* cases of duplicate names; enforce case-insensitive unique names at the db schema level
 
 ### Changed
 - No longer round framerate to nearest integer when normalizing framerate
@@ -85,6 +85,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Optimize Jellyfin database fields and indexes
 - Optimize Jellyfin show library scans by only requesting `People` (actors, directors, writers) when etags don't match
   - This should significantly speed up periodic library scans, particularly against Jellyfin 10.11.x
+- Lazy load media item images in UI
 
 ## [25.9.0] - 2025-11-29
 ### Added
diff --git a/ErsatzTV/Shared/MediaCard.razor b/ErsatzTV/Shared/MediaCard.razor
index 418a8db25..a598275e7 100644
--- a/ErsatzTV/Shared/MediaCard.razor
+++ b/ErsatzTV/Shared/MediaCard.razor
@@ -10,7 +10,7 @@
     {
         <div class="@(IsSelected ? DeleteClicked.HasDelegate ? "media-card-selected-delete" : "media-card-selected" : "")"
              style="border-radius: 4px; position: relative;">
-            <MudPaper Class="@($"media-card {CardClass}")" Style="@ArtworkForItem()">
+            <MudPaper Class="@($"media-card {CardClass}")" Style="position: relative; overflow: hidden;">
                 @if (string.IsNullOrWhiteSpace(Data.Poster))
                 {
                     string placeholder = GetPlaceholder(Data.SortTitle);
@@ -24,6 +24,13 @@
                         @placeholder
                     </MudText>
                 }
+                else
+                {
+                    <img src="@GetPosterUrl()"
+                         loading="lazy"
+                         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;"
+                         alt="@Data.SortTitle"/>
+                }
             </MudPaper>
             @if (IsSelected)
             {
@@ -100,7 +107,7 @@
     }
     else
     {
-        <MudPaper Class="@($"media-card {CardClass}")" Style="@ArtworkForItem()">
+        <MudPaper Class="@($"media-card {CardClass}")" Style="position: relative; overflow: hidden;">
             @if (string.IsNullOrWhiteSpace(Data.Poster))
             {
                 string placeholder = GetPlaceholder(Data.SortTitle);
@@ -114,6 +121,13 @@
                     @placeholder
                 </MudText>
             }
+            else
+            {
+                <img src="@GetPosterUrl()"
+                     loading="lazy"
+                     style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;"
+                     alt="@Data.SortTitle"/>
+            }
         </MudPaper>
     }
     <MudText Align="Align.Center" Class="media-card-title" UserAttributes="@(new Dictionary<string, object> { { "title", Data.Title } })">
@@ -190,16 +204,19 @@
         return char.IsDigit(first) || !char.IsLetter(first) ? "#" : first.ToString();
     }
 
-    private string ArtworkForItem()
+    private string GetPosterUrl()
     {
-        if (IsRemoteArtwork || Data.Poster?.StartsWith("http://") == true || Data.Poster?.StartsWith("https://") == true)
+        if (string.IsNullOrWhiteSpace(Data.Poster))
+        {
+            return null;
+        }
+
+        if (IsRemoteArtwork || Data.Poster.StartsWith("http://") || Data.Poster.StartsWith("https://"))
         {
-            return $"position: relative; background-image: url({Data.Poster}); background-size: cover; background-position: center";
+            return Data.Poster;
         }
 
-        return string.IsNullOrWhiteSpace(Data.Poster)
-            ? "position: relative"
-            : $"position: relative; background-image: url(artwork/{PathForArtwork()}/{Data.Poster}); background-size: cover; background-position: center";
+        return $"artwork/{PathForArtwork()}/{Data.Poster}";
     }
 
     private string PathForArtwork() => ArtworkKind switch