add spinner, change data returned

static/index.js

@@ -1,12 +1,20 @@
 "use strict";
 
 const form = document.getElementById("predictionForm");
+const predictionResults = document.getElementById("predictionResults");
+
 form.addEventListener("submit", async (e) => {
 	e.preventDefault();
 
 	const sequence = document.getElementById("sequence").value;
 	const smiles = document.getElementById("smiles").value;
 
+	// unhide the div
+	predictionResults.style.display = "block";
+
+	// loader until the results are fetched
+	predictionResults.innerHTML = `<div class="loader"></div>`
+	
 	const response = await fetch("/api/predict", {
 		method: "POST",
 		headers: {
@@ -17,14 +25,11 @@ form.addEventListener("submit", async (e) => {
 	});
 
 	const data = await response.json();
-	const predictionResults = document.getElementById("predictionResults");
-
-	// unhide the results
-	predictionResults.style.display = "block";
 
+	// display the results
 	predictionResults.innerHTML = `
 		<h2>Prediction Results</h2>
-		<p><strong>Km:</strong> ${data.km}</p>
-		<p><strong>Kcat:</strong> ${data.kcat}</p>
-		<p><strong>Vmax:</strong> ${data.vmax}</p>`;
+		<p><strong>Km:</strong> ${data.Km}</p>
+		<p><strong>Kcat:</strong> ${data.Kcat}</p>
+		<p><strong>Vmax:</strong> ${data.Vmax}</p>`;
 });

static/styles.css

@@ -92,3 +92,21 @@ a:hover {
 	height: 50px;
 	margin-right: 5px;
 }
+
+.loader {
+	border: 16px solid lightgray;
+	border-top: 16px solid lightgreen;
+	border-radius: 50%;
+	width: 50px;
+	height: 50px;
+	animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}