feat: create loading message to avoid confusion with no data available messages

Author: taghizadlaura

website/index.html

@@ -142,7 +142,7 @@ <h2>Which delegations tend to win medals, and which don't?</h2>
 
       <div class="slide" data-anchor="medal-flow">
         <div id="medal-viz">
-          <h3 class="medal-viz-title"></h3>
+          <h3 class="medal-viz-title">Distribution of medals in Summer Olympics</h3>
 
           <div class="medal-controls">
             <div>
@@ -175,7 +175,7 @@ <h4 class="medal-viz-subtitle"></h4>
       </div>
 
       <div class="slide" data-anchor="never-medaled">
-        <h3 class="never-medaled-viz-title"></h3>
+        <h3 class="never-medaled-viz-title">Countries that have participated without ever winning a medal</h3>
 
         <div id="never-medaled-viz"></div>
 

website/js/body-types.js

@@ -47,7 +47,10 @@ import { AthleteRenderer } from "./AthleteRenderer.js";
   document.addEventListener("DOMContentLoaded", init);
 
   async function init() {
-    if (!document.querySelector(selectors.root)) return;
+    const root = document.querySelector(selectors.root);
+    if (!root) return;
+
+    showLoading(root);
 
     try {
       const [rows] = await Promise.all([
@@ -65,6 +68,7 @@ import { AthleteRenderer } from "./AthleteRenderer.js";
       state.rows = rows;
       state.columns = detectColumns(rows);
 
+      removeLoading(root);
       setupControls();
       initializeState();
       refreshAllControls();
@@ -719,6 +723,19 @@ import { AthleteRenderer } from "./AthleteRenderer.js";
     return event || sport || "Unknown";
   }
 
+  function showLoading(root) {
+    root.classList.add("is-loading");
+    const div = document.createElement("div");
+    div.className = "viz-loading";
+    div.textContent = "Loading data, please wait…";
+    root.appendChild(div);
+  }
+
+  function removeLoading(root) {
+    root.classList.remove("is-loading");
+    root.querySelectorAll(".viz-loading").forEach(el => el.remove());
+  }
+
   function showError(message) {
     const mount = document.querySelector(selectors.podium);
     if (!mount) return;

website/js/delegations.js

@@ -299,7 +299,8 @@
   document.addEventListener("DOMContentLoaded", init);
 
   async function init() {
-    if (!document.querySelector(selectors.root)) return;
+    const root = document.querySelector(selectors.root);
+    if (!root) return;
 
     if (typeof d3 === "undefined") {
       showError("D3 is not loaded.");
@@ -311,12 +312,15 @@
       return;
     }
 
+    showLoading(root);
+
     try {
       const rows = await d3.csv(DATA_PATH, d3.autoType);
 
       state.rows = rows;
       state.columns = detectColumns(rows);
 
+      removeLoading(root);
       setupControls();
       setSeason("Summer");
     } catch (error) {
@@ -1253,6 +1257,19 @@
     return tooltip;
   }
 
+  function showLoading(root) {
+    root.classList.add("is-loading");
+    const div = document.createElement("div");
+    div.className = "viz-loading";
+    div.textContent = "Loading data, please wait…";
+    root.appendChild(div);
+  }
+
+  function removeLoading(root) {
+    root.classList.remove("is-loading");
+    root.querySelectorAll(".viz-loading").forEach(el => el.remove());
+  }
+
   function showError(message) {
     d3.select(selectors.root)
       .selectAll("*")

website/js/fair-distribution.js

@@ -36,6 +36,11 @@
     const root = document.querySelector(selectors.root);
     if (!root) return;
 
+    showLoading(root);
+
+    const rankingRoot = document.querySelector("#fair-ranking-viz");
+    if (rankingRoot) showLoading(rankingRoot);
+
     try {
       const rows = await d3.csv(DATA_PATH, d3.autoType);
 
@@ -44,6 +49,7 @@
 
       ensureRequiredColumns();
       injectStyles();
+      removeLoading(root);
       buildScaffold();
       initializeState();
       populateControls();
@@ -931,6 +937,23 @@
     return d3.format(",.0f")(value);
   }
 
+  function showLoading(root) {
+    root.classList.add("is-loading");
+    const slide = root.closest(".slide");
+    if (slide) slide.classList.add("is-loading");
+    const div = document.createElement("div");
+    div.className = "fair-loading";
+    div.textContent = "Loading data, please wait…";
+    root.appendChild(div);
+  }
+
+  function removeLoading(root) {
+    root.classList.remove("is-loading");
+    const slide = root.closest(".slide");
+    if (slide) slide.classList.remove("is-loading");
+    root.querySelectorAll(".fair-loading").forEach(el => el.remove());
+  }
+
   function showError(message) {
     const root = document.querySelector(selectors.root);
     if (!root) return;
@@ -941,6 +964,9 @@
   function renderRankingTable() {
     const root = d3.select("#fair-ranking-viz");
     if (root.empty()) return;
+    root.classed("is-loading", false);
+    const slide = root.node().closest(".slide");
+    if (slide) slide.classList.remove("is-loading");
 
     if (!state.rankingYear) {
       state.rankingSeason = state.season;

website/js/gender-evolution.js

@@ -92,6 +92,8 @@
     if (!root) return;
     if (typeof d3 === "undefined") { showError("D3 is not loaded."); return; }
 
+    showLoading(root);
+
     try {
       const raw = await d3.json(DATA_PATH);
 
@@ -135,6 +137,7 @@
       );
 
       state.sportColorScale = buildGlobalSportColorScale(state.dataBySeasonYear);
+      removeLoading(root);
       setupControls();
       setSeason("Summer");
     } catch (error) {
@@ -816,6 +819,19 @@
      Error
      ============================================================ */
 
+  function showLoading(root) {
+    root.classList.add("is-loading");
+    const div = document.createElement("div");
+    div.className = "viz-loading";
+    div.textContent = "Loading data, please wait…";
+    root.appendChild(div);
+  }
+
+  function removeLoading(root) {
+    root.classList.remove("is-loading");
+    root.querySelectorAll(".viz-loading").forEach(el => el.remove());
+  }
+
   function showError(message) {
     const root = d3.select(selectors.root);
 

website/js/geopolitics-conflicts.js

@@ -282,6 +282,8 @@
       return;
     }
 
+    showGeoLoading();
+
     try {
       const [rows, worldGeo] = await Promise.all([
         d3.csv(DATA_PATH, d3.autoType),
@@ -303,6 +305,7 @@
         hasOlympicData: state.olympicYears.includes(event.year)
       }));
 
+      removeGeoLoading();
       ensureTooltip();
 
       const initialYear = state.events[0]?.year || state.olympicYears[0];
@@ -988,9 +991,28 @@
   }
 
   /* ============================================================
-     Error
+     Loading / Error
      ============================================================ */
 
+  function showGeoLoading() {
+    const root = document.querySelector(selectors.mapRoot);
+    if (!root) return;
+    const slide = root.closest(".slide");
+    if (slide) slide.classList.add("is-loading");
+    const div = document.createElement("div");
+    div.className = "geo-loading";
+    div.textContent = "Loading data, please wait…";
+    root.appendChild(div);
+  }
+
+  function removeGeoLoading() {
+    document.querySelectorAll(".geo-loading").forEach(el => {
+      const slide = el.closest(".slide");
+      if (slide) slide.classList.remove("is-loading");
+      el.remove();
+    });
+  }
+
   function showGeoError(message) {
     d3.select(selectors.mapRoot)
       .selectAll("*")

website/js/never-medaled.js

@@ -265,6 +265,8 @@
       return;
     }
 
+    showLoading(root);
+
     try {
       const [rows, worldGeo] = await Promise.all([
         d3.csv(DATA_PATH, d3.autoType),
@@ -276,6 +278,7 @@
       state.columns = detectColumns(rows);
 
       injectStyles();
+      removeLoading(root);
       injectControls(root);
       setupControls();
       setSeason("Summer");
@@ -1183,6 +1186,19 @@
     return tooltip;
   }
 
+  function showLoading(root) {
+    root.classList.add("is-loading");
+    const div = document.createElement("div");
+    div.className = "never-loading";
+    div.textContent = "Loading data, please wait…";
+    root.appendChild(div);
+  }
+
+  function removeLoading(root) {
+    root.classList.remove("is-loading");
+    root.querySelectorAll(".never-loading").forEach(el => el.remove());
+  }
+
   function showError(message) {
     const root = d3.select(selectors.root);
 

website/styles.css

@@ -397,6 +397,35 @@ h4 {
   max-width: 280px;
 }
 
+.viz-loading,
+.geo-loading,
+.fair-loading,
+.never-loading {
+  font-family: "Elms Sans", sans-serif;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 18px;
+  text-align: center;
+  padding: 40px 20px;
+  width: 100%;
+}
+
+/* Hide controls, timebars, and subtitles while data is loading */
+#gender-viz.is-loading .gender-controls,
+#gender-viz.is-loading .gender-timeline,
+#gender-viz.is-loading h4,
+#medal-viz.is-loading .medal-controls,
+#medal-viz.is-loading .medal-timeline,
+#medal-viz.is-loading .medal-viz-subtitle,
+#bodytype-viz.is-loading .bodytype-controls,
+#fair-viz.is-loading .fair-controls,
+#fair-ranking-viz.is-loading .fair-ranking-controls,
+#never-medaled-viz.is-loading ~ .medal-timeline.never-timeline,
+.slide.is-loading .fair-viz-subtitle,
+.slide.is-loading .geo-viz-subtitle,
+.slide.is-loading .geo-country-hint {
+  visibility: hidden;
+}
+
 .gender-empty,
 .gender-error {
   font-family: "Elms Sans", sans-serif;