Virtualize blog post to reduce initial loading time, Closes #28

Author: linkdotnet

LinkDotNet.Blog.Web/Pages/Index.razor

@@ -23,16 +23,16 @@
         </div>
     </header>
     <div class="content px-4 my-2">
-        @for (var i = 0; i < currentPage.Count; i++)
-        {
-            <ShortBlogPost BlogPost="currentPage[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
-        }
+        <Virtualize Items="@currentPage.ToList()">
+            <ShortBlogPost BlogPost="context" UseAlternativeStyle="@(currentLine++ % 2 != 0)"></ShortBlogPost>
+        </Virtualize>
     </div>
     <BlogPostNavigation CurrentPage="@currentPage" OnPageChanged="@GetPage"></BlogPostNavigation>
 </section>
 
 @code {
-    IPagedList<BlogPost> currentPage = new PagedList<BlogPost>(null, 1, 1);
+    private IPagedList<BlogPost> currentPage = new PagedList<BlogPost>(null, 1, 1);
+    private int currentLine;
 
     private string ImageUrl => appConfiguration.Introduction.BackgroundUrl.ToAbsoluteUrl(navigationManager.BaseUri);
 
@@ -54,7 +54,10 @@
 
     private async Task GetPage(int newPage)
     {
-        currentPage = await blogPostRepository.GetAllAsync(p => p.IsPublished, b => b.UpdatedDate, pageSize: appConfiguration.BlogPostsPerPage, page: 
-        newPage);
+        currentPage = await blogPostRepository.GetAllAsync(
+            p => p.IsPublished,
+            b => b.UpdatedDate,
+            pageSize: appConfiguration.BlogPostsPerPage,
+            page: newPage);
     }
 }

LinkDotNet.Blog.Web/Shared/ShortBlogPost.razor

@@ -5,8 +5,7 @@
 <article>
   <div class="blog-card @AltCssClass">
     <div class="meta">
-      <div class="photo"><img style="height: 100%; width: 100%; display:block;object-position: center; object-fit: cover;" data-src="@BlogPost.PreviewImageUrl" alt=""
-      loading="lazy" /></div>
+      <div class="photo" style="background-image: url(@BlogPost.PreviewImageUrl)"></div>
       <ul class="details">
         <li class="date">@BlogPost.UpdatedDate.ToString("dd/MM/yyyy")</li>
         @if (BlogPost.Tags != null)