feat: add a loading animation to the osv iframe (#1661)

Added a spinner indicating iframe is loading. Fixes #1524 


https://github.com/user-attachments/assets/b690e802-33ed-4f10-9f1e-389e132b1df0

Signed-off-by: Weizhou Ren <willzhou0305@gmail.com>

internal/output/html/script.js

@@ -56,9 +56,16 @@ function openVulnInNewTab(inputString) {
   newTab.id = inputString; // Set the ID to the input string
   newTab.className = "tab osv-tab"; // Set the class name
 
+  // Create a spinner indicating loading status
+  const spinner = document.createElement("div");
+  spinner.className = "iframe-spinner";
+
   // Create the iframe element.
   const iframe = document.createElement("iframe");
   iframe.src = osvURL;
+  iframe.onload = () => {
+    newTab.removeChild(spinner);
+  };
 
   // Create a new tab button
   const newTabButton = document.createElement("div");
@@ -93,6 +100,7 @@ function openVulnInNewTab(inputString) {
   newTabButton.appendChild(closeIcon);
 
   // Add the iframe to the new tab div.
+  newTab.appendChild(spinner);
   newTab.appendChild(iframe);
   // Add the iframe to the container.
   tabs.appendChild(newTab);

internal/output/html/style.css

@@ -269,11 +269,28 @@ header {
   color: #fff;
 }
 
+.osv-tab {
+  position: relative;
+}
+
 .osv-tab iframe {
   width: 100%;
   min-height: 1000px;
   border: none;
-  background-color: #000;
+}
+
+.iframe-spinner {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 48px;
+  height: 48px;
+  border: 5px solid #fff;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
 }
 
 #vuln-tab {
@@ -631,3 +648,12 @@ div.title {
 #license-summary-details {
   margin-left: 30px;
 }
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}