fixed player loading status.

app.py

@@ -436,9 +436,10 @@ def build_head ():
 		# left under Compose + Logs (robust against Gradio's flex-nesting quirks).
 		os.path.join(WEB_DIR, 'layout-fit.js'),
 	]
-	tags = ['<script>window.__LILYSCRIPT_SOUNDFONT_URL=%r;window.__LILYSCRIPT_FLUID_URL=%r;</script>'
+	tags = ['<script>window.__LILYSCRIPT_SOUNDFONT_URL=%r;window.__LILYSCRIPT_FLUID_URL=%r;window.__LILYSCRIPT_LOADING_RENDERER=%s;</script>'
 		% (_file_url(os.path.join(WEB_DIR, 'soundfont')) + '/',
-		   _file_url(os.path.join(WEB_DIR, 'fluid')) + '/')]
+		   _file_url(os.path.join(WEB_DIR, 'fluid')) + '/',
+		   json.dumps(T('loading_renderer')))]
 	tags.append('<link rel="stylesheet" href="%s">' % _file_url(os.path.join(WEB_DIR, 'score-player.css')))
 	tags.append('<link rel="stylesheet" href="%s">' % _file_url(os.path.join(WEB_DIR, 'lyl-editor.css')))
 	for s in scripts:

web/score-player.css

@@ -223,3 +223,35 @@
 #ls-score .ls-sf.ready .ls-sf-check {
 	display: inline;
 }
+
+/* In-panel renderer-loading overlay: shown inside the freshly-mounted score panel
+   while the 7.6MB verovio bundle is still downloading (score-player.js mounts early,
+   before verovio finishes — see app.py head order). Mirrors the static placeholder
+   spinner so the loading feedback is continuous across the mount handover. Removed
+   (display:none) once verovio is ready or a score has rendered. */
+#ls-score .ls-renderer-loading {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 240px;
+	color: #999;
+	text-align: center;
+}
+#ls-score .ls-renderer-loading .ls-loading-spinner {
+	width: 38px;
+	height: 38px;
+	margin-bottom: 14px;
+	border: 4px solid #e3e3ea;
+	border-top-color: #7c5cff;
+	border-radius: 50%;
+	animation: ls-spin 0.8s linear infinite;
+}
+#ls-score .ls-renderer-loading .ls-loading-text {
+	font-size: 14px;
+}
+@media (prefers-reduced-motion: reduce) {
+	#ls-score .ls-renderer-loading .ls-loading-spinner {
+		animation: ls-spin 2.4s linear infinite;
+	}
+}

web/score-player.js

@@ -20,6 +20,10 @@
 	'use strict';
 
 	const SOUNDFONT_URL = window.__LILYSCRIPT_SOUNDFONT_URL || './soundfont/';
+	// Label for the in-panel renderer-loading spinner. app.py sets the i18n'd string on
+	// window.__LILYSCRIPT_LOADING_RENDERER (matches the static placeholder's T('loading_renderer'));
+	// fall back to English if it's absent (e.g. score-player.js loaded standalone).
+	const LOADING_RENDERER_TEXT = window.__LILYSCRIPT_LOADING_RENDERER || 'Loading score renderer…';
 
 	const state = {
 		toolkit: null,        // Verovio toolkit
@@ -178,6 +182,7 @@
 			const pages = [];
 			for (let pg = 1; pg <= pageCount; pg++) pages.push(tk.renderToSVG(pg));
 			injectSvg(pages);
+			setRendererLoading(false);   // score is now visible — ensure the loading spinner is gone
 			state.lastCode = code;
 			state.lastMei = mei;
 			setStatus('', '');
@@ -560,7 +565,15 @@
 		const svgBox = document.createElement('div'); svgBox.className = 'ls-svg';
 		const cursor = document.createElement('div'); cursor.className = 'ls-cursor';
 		svgBox.appendChild(cursor);
-		wrap.appendChild(status); wrap.appendChild(svgBox);
+		// Renderer-loading overlay: a spinner shown INSIDE the freshly-mounted panel while
+		// the 7.6MB verovio bundle is still downloading. Since score-player.js now mounts
+		// early (before verovio finishes — see app.py head order), without this the panel
+		// would sit blank with no feedback during the wait (the static placeholder is gone,
+		// replaced by this mount). Removed once verovio is ready (setRendererLoading(false)).
+		const loading = document.createElement('div'); loading.className = 'ls-renderer-loading';
+		loading.innerHTML = '<div class="ls-loading-spinner" aria-hidden="true"></div>' +
+			'<div class="ls-loading-text">' + LOADING_RENDERER_TEXT + '</div>';
+		wrap.appendChild(status); wrap.appendChild(svgBox); wrap.appendChild(loading);
 
 		// transport bar (above the score)
 		const player = document.createElement('div'); player.className = 'ls-player'; player.style.display = 'none';
@@ -577,6 +590,7 @@
 		root.appendChild(player); root.appendChild(wrap);
 
 		els.root = root; els.svg = svgBox; els.preview = wrap; els.status = status; els.player = player; els.cursor = cursor;
+		els.loading = loading;
 		els.playBtn = player.querySelector('.ls-play');
 		els.pauseBtn = player.querySelector('.ls-pause');
 		els.stopBtn = player.querySelector('.ls-stop');
@@ -616,7 +630,10 @@
 			if (typeof time === 'number' && !isNaN(time) && time >= 0) seekTo(time);
 		});
 
-		initVerovio();   // warm up early
+		// Show the renderer-loading spinner until verovio is ready; initVerovio() resolves
+		// when the (possibly still-downloading) verovio bundle has constructed its toolkit.
+		setRendererLoading(!state.verovioReady);
+		initVerovio().then(function (tk) { setRendererLoading(false); });   // warm up early; clears spinner when ready
 		// Start loading the sound library (FluidSynth GM soundfont, ~40MB) right away
 		// at page mount rather than deferring to the first play — the AudioContext is
 		// created suspended (no autoplay-policy violation) and the fetch/worklet load
@@ -625,6 +642,14 @@
 		initAudio();
 	}
 
+	// Toggle the in-panel renderer-loading spinner (verovio still downloading). Hidden
+	// once a score has actually rendered (an SVG is present) so it never overlaps content.
+	function setRendererLoading (flag) {
+		if (!els.loading) return;
+		var hasSvg = els.svg && els.svg.querySelector('svg');
+		els.loading.style.display = (flag && !hasSvg) ? '' : 'none';
+	}
+
 	// Public API consumed by app.py's injected glue.
 	window.LilyScore = {
 		mount: mount,