Placeholders

StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBodyPlaceholder.razor

@@ -0,0 +1,13 @@
+@inherits LayoutComponentBase
+@using StpFoodBlazor.Models
+
+<span id="deals_table_body_placeholder" aria-hidden="true">
+    @{var rowCounter = 0;}
+    @foreach (var deal in Enumerable.Range(1, 30))
+    {
+        <div class="row rounded placeholder-glow">
+            <span class="col-12 rounded placeholder@(rowCounter % 2 == 0 ? " bg-white" : "")">&nbsp;</span>
+        </div>
+        rowCounter++;
+    }
+</span>

StpFoodBlazor/StpFoodBlazor/Components/Layout/GiftCards/GiftCardsTableBodyPlaceholder.razor

@@ -0,0 +1,12 @@
+@inherits LayoutComponentBase
+
+<div id="giftcards_table_body_placeholder">
+    @{var rowCounter = 0;}
+    @foreach (var giftcard in Enumerable.Range(1, 30))
+    {
+    <div class="row rounded placeholder-glow">
+        <span class="col-12 rounded placeholder@(rowCounter % 2 == 0 ? " bg-white" : "")">&nbsp;</span>
+    </div>
+    rowCounter++;
+    }
+</div>

StpFoodBlazor/StpFoodBlazor/Components/Pages/Deals.razor

@@ -11,24 +11,19 @@
 @attribute [StreamRendering]
 
 <PageTitle>Deals</PageTitle>
-
-<div class="container mb-5">
+    <div class="container mb-5">
+        <DealFilterBar selectedDayOfWeek="@selectedDayOfWeek" OnSelectedDayChanged="OnSelectedDayChanged"
+            happyHour="@happyHour" OnHappyHourChanged="OnHappyHourChanged" />
+        <DealTableHeader selectedDayOfWeek="@selectedDayOfWeek" />
 @if (deals == null)
 {
-    <div class="row">
-        <p><em>Loading...</em></p>
-    </div>
+        <DealTableBodyPlaceholder />
 }
 else
 {
-    <DealFilterBar selectedDayOfWeek="@selectedDayOfWeek" OnSelectedDayChanged="OnSelectedDayChanged"
-        happyHour="@happyHour" OnHappyHourChanged="OnHappyHourChanged" />
-
-    <DealTableHeader selectedDayOfWeek="@selectedDayOfWeek" />
-
-    <DealTableBody deals="@deals" selectedDayOfWeek="@selectedDayOfWeek" />
+        <DealTableBody deals="@deals" selectedDayOfWeek="@selectedDayOfWeek" />
 }
-</div>
+    </div>
 
 @code {
     private DealEvent[]? deals;
@@ -77,6 +72,6 @@
 
     private void SortDeals()
     {
         deals = DealSorter.Sort(deals);
     }
 }

StpFoodBlazor/StpFoodBlazor/Components/Pages/GiftCards.razor

@@ -12,18 +12,15 @@
 <PageTitle>Gift Cards</PageTitle>
 
 <div class="container mb-5">
-@if (giftcards == null)
-{
-    <div class="row">
-        <p><em>Loading...</em></p>
-    </div>
-}
-else
-{
     <GiftCardsTableHeader />
-
-    <GiftCardsTableBody giftcards="@giftcards"/>
-}
+    @if (giftcards == null)
+    {
+        <GiftCardsTableBodyPlaceholder/>
+    }
+    else
+    {
+        <GiftCardsTableBody giftcards="@giftcards"/>
+    }
 </div>
 
 @code {
@@ -42,7 +39,7 @@
 
     private void SortGiftCards()
     {
         giftcards = GiftCardSorter.Sort(giftcards);
     }
 
     private void FilterGiftCards()

StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor

@@ -18,6 +18,25 @@
         ctx.Services.AddSingleton<ITimeService>(timeService);
     }
 
+    [Fact]
+    public void DealsShouldDisplayPlaceholderWhenLoading()
+    {
+        timeService.DayOfWeek = DayOfWeek.Wednesday.ToString();
+        TestDealService testDealService = new TestDealService();
+        testDealService.LongRunning = true;
+        ctx.Services.AddSingleton<IDealService>(testDealService);
+
+        var cut = ctx.Render(@<Deals />);
+        cut.WaitForElement("#deals_table_body_placeholder");
+        var elements = cut.Find("#deals_table_body_placeholder");
+
+        Assert.Equal(30, elements.ChildElementCount);
+        Assert.Equal("<span class=\"col-12 rounded placeholder bg-white\">&nbsp;</span>",
+            elements.Children[0].InnerHtml);
+        Assert.Equal("<span class=\"col-12 rounded placeholder\">&nbsp;</span>",
+            elements.Children[1].InnerHtml);
+    }
+
     [Fact]
     public void DealsShouldDisplayTwoColumnsWednesday()
     {
@@ -77,6 +96,7 @@
         ctx.Services.AddSingleton<ITimeService>(timeService);
         var cut = ctx.Render(@<Deals />);
         var dowSelect = (IHtmlSelectElement)cut.WaitForElement("#day-of-week-select");
+        getElements(cut); // just to make sure table is rendered
 
         Assert.Equal(DateTime.Today.DayOfWeek.ToString(), dowSelect.Value);
     }

StpFoodBlazor/StpFoodBlazorTest/Pages/GiftCardsTest.razor

@@ -17,6 +17,24 @@
         ctx.Services.AddSingleton<ITimeService>(timeService);
     }
 
+    [Fact]
+    public void GiftCardsShouldDisplayPlaceholderWhenLoading()
+    {
+        TestGiftCardService testGiftCardService = new TestGiftCardService();
+        testGiftCardService.LongRunning = true;
+        ctx.Services.AddSingleton<IGiftCardService>(testGiftCardService);
+
+        var cut = ctx.Render(@<GiftCards />);
+        cut.WaitForElement("#giftcards_table_body_placeholder");
+        var elements = cut.Find("#giftcards_table_body_placeholder");
+
+        Assert.Equal(30, elements.ChildElementCount);
+        Assert.Equal("<span class=\"col-12 rounded placeholder bg-white\">&nbsp;</span>",
+            elements.Children[0].InnerHtml);
+        Assert.Equal("<span class=\"col-12 rounded placeholder\">&nbsp;</span>",
+            elements.Children[1].InnerHtml);
+    }
+
     [Fact]
     public void GiftCardsShouldRenderRecords()
     {

StpFoodBlazor/StpFoodBlazorTest/Services/TestDealService.cs

@@ -5,15 +5,20 @@
 using System.Threading.Tasks;
 using System;
 
-
 namespace StpFoodBlazorTest.Services
 {
     public class TestDealService : IDealService
     {
         private static readonly string DEAL_FIXTURES_PATH = Path.Combine(Directory.GetCurrentDirectory(), "fixtures", "deals.json");
+        public Boolean LongRunning { get; set; } = false;
 
         public async Task<DealEvent[]> GetDealsAsync()
         {
+            if (LongRunning)
+            {
+                await Task.Delay(7000);
+            }
+
             if (File.Exists(DEAL_FIXTURES_PATH))
             {
                 string jsonContent = await File.ReadAllTextAsync(DEAL_FIXTURES_PATH);

StpFoodBlazor/StpFoodBlazorTest/Services/TestGiftCardService.cs

@@ -5,15 +5,20 @@
 using System.Threading.Tasks;
 using System;
 
-
 namespace StpFoodBlazorTest.Services
 {
     public class TestGiftCardService : IGiftCardService
     {
         private static readonly string GIFTCARD_FIXTURES_PATH = Path.Combine(Directory.GetCurrentDirectory(), "fixtures", "giftcards.json");
+        public Boolean LongRunning { get; set; } = false;
 
         public async Task<GiftCard[]> GetGiftCardsAsync()
         {
+            if (LongRunning)
+            {
+                await Task.Delay(7000);
+            }
+
             if (File.Exists(GIFTCARD_FIXTURES_PATH))
             {
                 string jsonContent = await File.ReadAllTextAsync(GIFTCARD_FIXTURES_PATH);