From d2a47ca37a5b7b3a088919476c75002b682efaf6 Mon Sep 17 00:00:00 2001
From: eebbesen <eebbesen.git@gmail.com>
Date: Tue, 17 Dec 2024 20:36:12 -0600
Subject: [PATCH 1/5] placeholders for deals

---
 .../Layout/DealTableBodyPlaceholder.razor     | 24 +++++++++++++++++++
 .../Components/Pages/Deals.razor              | 18 ++++++--------
 .../StpFoodBlazorTest/Pages/DealsTest.razor   | 20 ++++++++++++++++
 .../Services/TestDealService.cs               |  6 +++++
 4 files changed, 57 insertions(+), 11 deletions(-)
 create mode 100644 StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBodyPlaceholder.razor

diff --git a/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBodyPlaceholder.razor b/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBodyPlaceholder.razor
new file mode 100644
index 0000000..4d29058
--- /dev/null
+++ 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
index e3c2cd9..9f71672 100644
--- 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
index 08339f8..7452ec0 100644
--- 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
index 15ea754..2c3f94b 100644
--- 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);

From 7653a2f4a1f64e8bab8efb20c54c752aa4d50da8 Mon Sep 17 00:00:00 2001
From: eebbesen <eebbesen.git@gmail.com>
Date: Wed, 18 Dec 2024 17:07:03 -0600
Subject: [PATCH 2/5] better placeholder

---
 .../Layout/DealTableBodyPlaceholder.razor       | 17 +++--------------
 .../StpFoodBlazor/Components/Pages/Deals.razor  |  3 +--
 .../StpFoodBlazorTest/Pages/DealsTest.razor     |  4 +---
 3 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBodyPlaceholder.razor b/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBodyPlaceholder.razor
index 4d29058..182cd62 100644
--- a/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBodyPlaceholder.razor
+++ b/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBodyPlaceholder.razor
@@ -1,24 +1,13 @@
 @inherits LayoutComponentBase
 @using StpFoodBlazor.Models
 
-<span id="deals_table_body_placeholder" class="placeholder-glow" aria-hidden="true">
+<span id="deals_table_body_placeholder" 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 class="row rounded placeholder-glow">
+            <span class="col-12 rounded placeholder@(rowCounter % 2 == 0 ? " bg-white" : "")"></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
index 9f71672..f217e4a 100644
--- a/StpFoodBlazor/StpFoodBlazor/Components/Pages/Deals.razor
+++ b/StpFoodBlazor/StpFoodBlazor/Components/Pages/Deals.razor
@@ -14,11 +14,10 @@
     <div class="container mb-5">
         <DealFilterBar selectedDayOfWeek="@selectedDayOfWeek" OnSelectedDayChanged="OnSelectedDayChanged"
             happyHour="@happyHour" OnHappyHourChanged="OnHappyHourChanged" />
-
         <DealTableHeader selectedDayOfWeek="@selectedDayOfWeek" />
 @if (deals == null)
 {
-        <DealTableBodyPlaceholder selectedDayOfWeek="@selectedDayOfWeek" />
+        <DealTableBodyPlaceholder />
 }
 else
 {
diff --git a/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor b/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor
index 7452ec0..e5cfef0 100644
--- a/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor
+++ b/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor
@@ -31,9 +31,7 @@
         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>",
+        Assert.Equal("<span class=\"col-12 rounded placeholder bg-white\"></span>",
             elements.Children[0].InnerHtml);
     }
 

From 981135cb3e08f56beb9f4ba8b62f7b6a8ef3078e Mon Sep 17 00:00:00 2001
From: eebbesen <eebbesen.git@gmail.com>
Date: Wed, 18 Dec 2024 17:13:00 -0600
Subject: [PATCH 3/5] spacing for placeholder

---
 .../Components/Layout/DealTableBodyPlaceholder.razor            | 2 +-
 StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBodyPlaceholder.razor b/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBodyPlaceholder.razor
index 182cd62..c95d81d 100644
--- a/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBodyPlaceholder.razor
+++ b/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBodyPlaceholder.razor
@@ -6,7 +6,7 @@
     @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" : "")"></span>
+            <span class="col-12 rounded placeholder@(rowCounter % 2 == 0 ? " bg-white" : "")">&nbsp;</span>
         </div>
         rowCounter++;
     }
diff --git a/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor b/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor
index e5cfef0..250056a 100644
--- a/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor
+++ b/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor
@@ -31,7 +31,7 @@
         var elements = cut.Find("#deals_table_body_placeholder");
 
         Assert.Equal(30, elements.ChildElementCount);
-        Assert.Equal("<span class=\"col-12 rounded placeholder bg-white\"></span>",
+        Assert.Equal("<span class=\"col-12 rounded placeholder bg-white\">&nbsp;</span>",
             elements.Children[0].InnerHtml);
     }
 

From 56db70953b09e284268df2aeddf8033e5fa6b029 Mon Sep 17 00:00:00 2001
From: eebbesen <eebbesen.git@gmail.com>
Date: Wed, 18 Dec 2024 17:19:11 -0600
Subject: [PATCH 4/5] test alternate row

---
 StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor b/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor
index 250056a..b0d599d 100644
--- a/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor
+++ b/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor
@@ -33,6 +33,8 @@
         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]

From 1271175c0f64b7d51b5bf2c917b131a0d5d02e5e Mon Sep 17 00:00:00 2001
From: eebbesen <eebbesen.git@gmail.com>
Date: Wed, 18 Dec 2024 17:37:38 -0600
Subject: [PATCH 5/5] giftcard placeholders

---
 .../GiftCardsTableBodyPlaceholder.razor       | 12 ++++++++++++
 .../Components/Pages/GiftCards.razor          | 19 ++++++++-----------
 .../StpFoodBlazorTest/Pages/DealsTest.razor   |  2 +-
 .../Pages/GiftCardsTest.razor                 | 18 ++++++++++++++++++
 .../Services/TestDealService.cs               |  1 -
 .../Services/TestGiftCardService.cs           |  7 ++++++-
 6 files changed, 45 insertions(+), 14 deletions(-)
 create mode 100644 StpFoodBlazor/StpFoodBlazor/Components/Layout/GiftCards/GiftCardsTableBodyPlaceholder.razor

diff --git a/StpFoodBlazor/StpFoodBlazor/Components/Layout/GiftCards/GiftCardsTableBodyPlaceholder.razor b/StpFoodBlazor/StpFoodBlazor/Components/Layout/GiftCards/GiftCardsTableBodyPlaceholder.razor
new file mode 100644
index 0000000..8d5abdc
--- /dev/null
+++ b/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>
diff --git a/StpFoodBlazor/StpFoodBlazor/Components/Pages/GiftCards.razor b/StpFoodBlazor/StpFoodBlazor/Components/Pages/GiftCards.razor
index 4def73c..600e514 100644
--- a/StpFoodBlazor/StpFoodBlazor/Components/Pages/GiftCards.razor
+++ b/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 {
diff --git a/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor b/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor
index b0d599d..eb15e61 100644
--- a/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor
+++ b/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor
@@ -27,7 +27,7 @@
         ctx.Services.AddSingleton<IDealService>(testDealService);
 
         var cut = ctx.Render(@<Deals />);
-        cut.WaitForElement("#deals_table_body_placeholder", TimeSpan.FromSeconds(5));
+        cut.WaitForElement("#deals_table_body_placeholder");
         var elements = cut.Find("#deals_table_body_placeholder");
 
         Assert.Equal(30, elements.ChildElementCount);
diff --git a/StpFoodBlazor/StpFoodBlazorTest/Pages/GiftCardsTest.razor b/StpFoodBlazor/StpFoodBlazorTest/Pages/GiftCardsTest.razor
index 8f10562..d7f3372 100644
--- a/StpFoodBlazor/StpFoodBlazorTest/Pages/GiftCardsTest.razor
+++ b/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()
     {
diff --git a/StpFoodBlazor/StpFoodBlazorTest/Services/TestDealService.cs b/StpFoodBlazor/StpFoodBlazorTest/Services/TestDealService.cs
index 2c3f94b..a02e55f 100644
--- a/StpFoodBlazor/StpFoodBlazorTest/Services/TestDealService.cs
+++ b/StpFoodBlazor/StpFoodBlazorTest/Services/TestDealService.cs
@@ -5,7 +5,6 @@
 using System.Threading.Tasks;
 using System;
 
-
 namespace StpFoodBlazorTest.Services
 {
     public class TestDealService : IDealService
diff --git a/StpFoodBlazor/StpFoodBlazorTest/Services/TestGiftCardService.cs b/StpFoodBlazor/StpFoodBlazorTest/Services/TestGiftCardService.cs
index 5206c12..2f824c8 100644
--- a/StpFoodBlazor/StpFoodBlazorTest/Services/TestGiftCardService.cs
+++ b/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);