enhanced loading icon.

app.py

@@ -330,13 +330,31 @@ def load_file (label, store):
 
 SHEET_PLACEHOLDER = '''
 <div id="ls-score" class="ls-score-mount" style="height:100%%;min-height:600px;">
-	<div style="display:flex;align-items:center;justify-content:center;height:100%%;
-		min-height:600px;border:1px dashed #c9c9c9;border-radius:8px;color:#999;
-		font-family:sans-serif;text-align:center;">
-		<div>
-			<div style="font-size:42px;margin-bottom:8px;">&#127932;</div>
-			<div>%s</div>
-		</div>
+	<!-- Self-contained loading placeholder. The spinner styles + keyframes are INLINE
+	     (not in score-player.css) on purpose: on a slow host (e.g. ModelScope) this
+	     static HTML is shown for a long time WHILE the vendored scripts and CSS are
+	     still downloading, so the animation must not depend on any external resource.
+	     Once score-player.js mounts, it replaces this whole node. -->
+	<style>
+		@keyframes ls-ph-spin { to { transform: rotate(360deg); } }
+		#ls-score .ls-loading-placeholder {
+			display: flex; flex-direction: column; align-items: center; justify-content: center;
+			height: 100%%; min-height: 600px; border: 1px dashed #c9c9c9; border-radius: 8px;
+			color: #999; font-family: sans-serif; text-align: center;
+		}
+		#ls-score .ls-loading-spinner {
+			width: 38px; height: 38px; margin-bottom: 14px;
+			border: 4px solid #e3e3ea; border-top-color: #7c5cff; border-radius: 50%%;
+			animation: ls-ph-spin 0.8s linear infinite;
+		}
+		#ls-score .ls-loading-text { font-size: 14px; }
+		@media (prefers-reduced-motion: reduce) {
+			#ls-score .ls-loading-spinner { animation: ls-ph-spin 2.4s linear infinite; }
+		}
+	</style>
+	<div class="ls-loading-placeholder">
+		<div class="ls-loading-spinner" aria-hidden="true"></div>
+		<div class="ls-loading-text">%s</div>
 	</div>
 </div>
 ''' % T('loading_renderer')