From e59a88c53587e83ea555dd63c97a9b752a4c7824 Mon Sep 17 00:00:00 2001
From: Pete Johns <paj+github@johnsy.com>
Date: Mon, 21 Oct 2024 00:39:11 +1100
Subject: [PATCH 1/3] Prettier

---
 test/transformers/fiveKFinishersToMilestones.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/transformers/fiveKFinishersToMilestones.test.ts b/test/transformers/fiveKFinishersToMilestones.test.ts
index c563fe7..e8d4c89 100644
--- a/test/transformers/fiveKFinishersToMilestones.test.ts
+++ b/test/transformers/fiveKFinishersToMilestones.test.ts
@@ -16,7 +16,7 @@ describe(fiveKFinishersToMilestones, () => {
       "agegrade",
       "achievement",
       "59:59",
-      9999999
+      9999999,
     );
   });
 

From 767c1ce0dfd9449f8cf63f0720965814b88ea6b1 Mon Sep 17 00:00:00 2001
From: Pete Johns <paj+github@johnsy.com>
Date: Mon, 21 Oct 2024 00:39:57 +1100
Subject: [PATCH 2/3] Allow for the deletion of a paragraph

---
 src/dom/upsertParagraph.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/dom/upsertParagraph.ts b/src/dom/upsertParagraph.ts
index 90f1a4e..ee38939 100644
--- a/src/dom/upsertParagraph.ts
+++ b/src/dom/upsertParagraph.ts
@@ -17,3 +17,13 @@ export function upsertParagraph(
   div.appendChild(paragraph);
   return paragraph;
 }
+
+export function deleteParagraph(div: HTMLElement, id: string) {
+  const existingParagraph = Array.from(div.children).find(
+    (element) => element.id === id,
+  );
+
+  if (existingParagraph) {
+    existingParagraph.remove();
+  }
+}

From 89d2b977268b13fba6e42c399e25198a47d7963c Mon Sep 17 00:00:00 2001
From: Pete Johns <paj+github@johnsy.com>
Date: Mon, 21 Oct 2024 00:42:43 +1100
Subject: [PATCH 3/3] Loading message

---
 src/index.ts | 32 ++++++++++++++++++++++----------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index ef0ef88..271cf6c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,40 +3,47 @@ import { fiveKFinishersToMilestones } from "./transformers/fiveKFinishersToMiles
 import { fiveKVolunteersToMilestones } from "./transformers/fiveKVolunteersToMilestones";
 import { MilestonePresenter } from "./presenters/MilestonePresenter";
 import { ResultsPageExtractor } from "./extractors/ResultsPageExtractor";
-import { upsertParagraph } from "./dom/upsertParagraph";
+import { deleteParagraph, upsertParagraph } from "./dom/upsertParagraph";
 import { VolunteerWithCount } from "./types/Volunteer";
 
 function populate(
   rpe: ResultsPageExtractor,
   volunteerWithCountList: VolunteerWithCount[],
+  message?: string
 ): void {
   const introduction = `On parkrunday, ${rpe.finishers.length} parkrunners joined us for event ${rpe.eventNumber} and completed the ${rpe.courseLength}km ${rpe.eventName} course`;
 
   const newestParkrunnersTitle = `Congratulations to our ${pluralize(
     "newest parkrunner",
     "newest parkrunners",
-    rpe.newestParkrunners.length,
+    rpe.newestParkrunners.length
   )}: `;
 
   const firstTimersTitle = `Welcome to the ${pluralize(
     "parkrunner",
     "parkrunners",
-    rpe.firstTimers.length,
+    rpe.firstTimers.length
   )} who joined us at ${rpe.eventName ?? "parkrun"} for the first time: `;
 
   const finishersWithNewPBsTitle = `Very well done to the ${pluralize(
     "parkrunner",
     "parkrunners",
-    rpe.finishersWithNewPBs.length,
+    rpe.finishersWithNewPBs.length
   )} who improved their personal best this week: `;
 
   const runningWalkingGroupsTitle = `We were pleased to see ${pluralize(
     "active group",
     "walking and running groups",
-    rpe.runningWalkingGroups.length,
+    rpe.runningWalkingGroups.length
   )} represented at this event: `;
 
-  const volunteersTitle = `${rpe.eventName} are very grateful to the ${volunteerWithCountList.length} amazing volunteers who made this event happen: `;
+  const volunteerOccasions = volunteerWithCountList
+    .map((v) => v.vols)
+    .reduce((c, p) => c + p, 0);
+
+  const volunteersTitle = `The following ${volunteerWithCountList.length.toLocaleString()} superstars have volunteered a total of ${volunteerOccasions.toLocaleString()} times between them, and helped us host ${
+    rpe.eventName
+  } this weekend. Our deep thanks to:  `;
 
   const milestoneCelebrations = [
     ...fiveKVolunteersToMilestones(volunteerWithCountList),
@@ -61,6 +68,7 @@ function populate(
   eventuateDiv.id = "eventuate";
 
   const reportDetails = {
+    message: { title: "⏳︎", details: message },
     introduction: { title: "", details: introduction },
 
     milestoneCelebrations: {
@@ -109,6 +117,8 @@ function populate(
       if (content.details) {
         const paragraphText = `${content.title} ${content.details}.`;
         upsertParagraph(eventuateDiv, section, paragraphText);
+      } else {
+        deleteParagraph(eventuateDiv, section);
       }
     }
   }
@@ -119,12 +129,14 @@ function eventuate() {
   const volunteerWithCountList = rpe
     .volunteersList()
     .map((vol) => new VolunteerWithCount(vol));
+  const waitingOn = volunteerWithCountList
+    .map((v) => v.promisedVols)
+    .filter((v) => !!v);
+  const loadingMessage = `Loading volunteer data for ${waitingOn.length} parkrunners. Please wait`;
 
-  populate(rpe, volunteerWithCountList); // Initial draw
+  populate(rpe, volunteerWithCountList, loadingMessage);
 
-  Promise.all(
-    volunteerWithCountList.map((v) => v.promisedVols).filter((v) => !!v),
-  ).then(() => populate(rpe, volunteerWithCountList)); // Refresh with volunteer counts
+  Promise.all(waitingOn).then(() => populate(rpe, volunteerWithCountList));
 }
 
 eventuate();