placeholder

index.html

@@ -169,7 +169,9 @@
         <figure>
             <img src="banner.png" alt="FineWeb">
         </figure>
-        <div id="clusters-plot"></div>
+        <div id="clusters-plot">
+            <img src="plots/clusters.png" alt="Clusters">
+        </div>
     </div>
 </d-title>
 <d-byline></d-byline>

src/clusters.js

@@ -109,15 +109,9 @@ const readData = async () => {
 }
 
 
-const showImage = (parent) => {
-    // create the image
-    const img = document.createElement('img');
-    img.src = 'plots/clusters.png';
-    img.alt = 'Clusters';
-    parent.appendChild(img);
-}
-
-const destroyImage = (parent) => {
+// The cluster is pretty big, so takes time to donwload
+// In the meantime we put there a placeholder image
+const destroyPlaceholderImage = (parent) => {
     const img = parent.querySelector('img');
     img.remove();
 }
@@ -125,7 +119,6 @@ const destroyImage = (parent) => {
 async function plotClusters() {
     const parent = document.getElementById('clusters-plot');
     // We do a little trolling on users and pretend that we already donwloaded the data by simply showing uniteractive image :)
-    showImage(parent);
     const data = await readData();
     const traces = [{
             type: 'scatter',
@@ -185,7 +178,7 @@ async function plotClusters() {
         },
     };
 
-    destroyImage(parent);
+    destroyPlaceholderImage(parent);
     Plotly.newPlot(parent, traces, layout);
 
     parent.on('plotly_relayout', (eventdata) => {