placeholders for deals

eebbesen · Dec 18, 2024 · d2a47ca · d2a47ca
1 parent 984a66b
commit d2a47ca
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 11 deletions.
diff --git a/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBodyPlaceholder.razor b/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBodyPlaceholder.razor
@@ -0,0 +1,24 @@
+@inherits LayoutComponentBase
+@using StpFoodBlazor.Models
+
+<span id="deals_table_body_placeholder" class="placeholder-glow" aria-hidden="true">
+    @{var rowCounter = 0;}
+    @foreach (var deal in Enumerable.Range(1, 30))
+    {
+        <div class="row rounded@(rowCounter % 2 == 0 ? " bg-secondary opacity-25" : "")">
+            @if (string.IsNullOrEmpty(selectedDayOfWeek))
+            {
+                <span class="col-1 placeholder"></span>
+            }
+            <span class="col-3 placeholder"></span>
+            <span class="col placeholder"></span>
+        </div>
+        rowCounter++;
+    }
+</span>
+
+@code
+{
+    [Parameter]
+    public string selectedDayOfWeek { get; set; }
+}
diff --git a/StpFoodBlazor/StpFoodBlazor/Components/Pages/Deals.razor b/StpFoodBlazor/StpFoodBlazor/Components/Pages/Deals.razor
@@ -11,24 +11,20 @@
 @attribute [StreamRendering]
 
 <PageTitle>Deals</PageTitle>
+    <div class="container mb-5">
+        <DealFilterBar selectedDayOfWeek="@selectedDayOfWeek" OnSelectedDayChanged="OnSelectedDayChanged"
+            happyHour="@happyHour" OnHappyHourChanged="OnHappyHourChanged" />
 
-<div class="container mb-5">
+        <DealTableHeader selectedDayOfWeek="@selectedDayOfWeek" />
 @if (deals == null)
 {
-    <div class="row">
-        <p><em>Loading...</em></p>
-    </div>
+        <DealTableBodyPlaceholder selectedDayOfWeek="@selectedDayOfWeek" />
 }
 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;

diff --git a/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor b/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", TimeSpan.FromSeconds(5));
+        var elements = cut.Find("#deals_table_body_placeholder");
+
+        Assert.Equal(30, elements.ChildElementCount);
+        Assert.Equal("<span class=\"col-1 placeholder\"></span>" +
+            "<span class=\"col-3 placeholder\"></span>\n            " +
+            "<span class=\"col placeholder\"></span>",
+            elements.Children[0].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);
     }

diff --git a/StpFoodBlazor/StpFoodBlazorTest/Services/TestDealService.cs b/StpFoodBlazor/StpFoodBlazorTest/Services/TestDealService.cs
@@ -11,9 +11,15 @@ 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);