feat: replace header spinner with a thin progress line

The icon-sized spinner was too heavy for the console header. Use a 2px
indeterminate progress line along the bottom edge of the header in the
theme's active color instead.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: bajrangCoder

changelog.md

@@ -7,7 +7,7 @@
 - Errors written to stderr are now shown in red
 - Console output can now be selected and copied
 - Header button to toggle line wrap in the console (remembered between sessions)
-- Loading indicator in the console header while Python loads or code is running
+- Thin progress line under the console header while Python loads or code is running
 - Fixed Python failing to load (or staying on "loading...") on some devices
 - Clear error message when Python fails to load, with automatic retry on the next run
 - Smaller plugin size (removed stale Pyodide files)

plugin.zip

@@ -78,8 +78,8 @@ class Python {
 			attr: { action: "toggle-wrap", role: "button" },
 			onclick: () => this.#setWrap(!this.$page.classList.contains("wrap")),
 		});
-		// Acode's spinner, shown while Python loads or code runs
-		this.$status = tag("span", { className: "icon hidden" });
+		// thin progress line along the header while Python loads or code runs
+		this.$status = tag("div", { className: "py-progress" });
 		this.$page.header?.append(this.$status, this.$wrapBtn);
 		this.#setWrap(loadWrap());
 		this.$style = tag("style", { textContent: style });
@@ -182,14 +182,13 @@ class Python {
 		}
 	}
 
-	/** Spinner while Python is busy, hidden while it waits for input() */
+	/** Progress line while Python is busy, hidden while it waits for input() */
 	#updateStatus() {
 		if (!this.$status) return;
 		const busy =
 			(this.#state === this.INITIALIZING || this.#running > 0) &&
 			!this.#isInput;
-		this.$status.classList.toggle("loading", busy);
-		this.$status.classList.toggle("hidden", !busy);
+		this.$status.classList.toggle("running", busy);
 	}
 
 	destroy() {

src/main.js

@@ -5,6 +5,36 @@
 		user-select: text;
 	}
 
+	> header {
+		position: relative;
+	}
+
+	.py-progress {
+		display: none;
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		height: 2px;
+		overflow: hidden;
+		pointer-events: none;
+
+		&.running {
+			display: block;
+		}
+
+		&::before {
+			content: "";
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			width: 40%;
+			background-color: var(--active-color);
+			animation: py-progress 1.2s ease-in-out infinite;
+		}
+	}
+
 	textarea {
 		background-color: transparent;
 		color: inherit;
@@ -52,6 +82,16 @@
 	}
 }
 
+@keyframes py-progress {
+	from {
+		transform: translateX(-100%);
+	}
+
+	to {
+		transform: translateX(250%);
+	}
+}
+
 @font-face {
 	font-family: "acode-plugin-python-icon";
 	src: url("./icon.ttf") format("truetype");