TehRiehlDealandClaude Opus 4.8
f08138718a
Phase 4 (behavior-preserving): split the monolithic component's DOM overlays into focused children, each owning its markup + scoped CSS: - LoadingIndicator.svelte, WelcomeTitle.svelte, Tooltip.svelte - NodeModal.svelte (modal + ~280 lines CSS; onClose callback, category-narrowed) - StatsPanel.svelte (toggle + backdrop + panel + ~340 lines CSS; onToggle/ onToggleBranch callbacks). Kept the .stats-panel-toggle class name stable so the entrance-animation GSAP querySelector still resolves. SkillTree.svelte drops from 2453 -> ~600 lines. Modernized the moved event handlers (on:click -> onclick), clearing the 9 Svelte deprecation warnings. svelte-check: 0 errors, 0 warnings. lint/test/build clean. Verified the stats panel renders identically in-browser (LVL/mastery/branches all correct). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
45 lines
903 B
Svelte
45 lines
903 B
Svelte
<!-- Loading spinner shown during PixiJS init (also serves as Lighthouse LCP element). -->
|
|
<div class="loading-indicator">
|
|
<div class="spinner"></div>
|
|
<p>Loading Atlas of Skills...</p>
|
|
</div>
|
|
|
|
<style>
|
|
.loading-indicator {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
z-index: 1000;
|
|
color: var(--color-gold);
|
|
}
|
|
|
|
.loading-indicator p {
|
|
font-family: 'Cinzel Decorative', 'Trajan Pro', serif;
|
|
font-size: 1.2rem;
|
|
margin-top: 1rem;
|
|
color: var(--color-gold);
|
|
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
|
}
|
|
|
|
.spinner {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 4px solid rgba(255, 215, 0, 0.2);
|
|
border-top: 4px solid var(--color-gold);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|