luulam/9router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): wait for the icon font itself before revealing Material Symbols

Browse Source 
`document.fonts.ready` resolved before the 4MB Material Symbols woff2 even
started loading — it runs in <head>, ahead of any element that would trigger
the lazy fetch. The `fonts-loaded` class landed early, so icons rendered
blank until a second load served the font from disk cache.

Load the face explicitly and swap visibility for opacity, with a 3s fallback
so icons never stay hidden if the font fails.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
decolua
2026-08-28 11:32:28 +07:00
parent e08ac6dada
commit 14401c433c
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/globals.css
View File

@@ -4,8 +4,8 @@
@custom-variant dark (&:where(.dark, .dark *));
/* Hide icon ligature text until font is ready */
.material-symbols-outlined { visibility: hidden; }
.fonts-loaded .material-symbols-outlined { visibility: visible; }
.material-symbols-outlined { opacity: 0; }
.fonts-loaded .material-symbols-outlined { opacity: 1; transition: opacity .12s ease-out; }
/* ============================================================
9Router palette — adopted from 9remote_private/web

2
src/app/layout.js
View File

@@ -34,7 +34,7 @@ export default function RootLayout({ children }) {
<head>
<script
dangerouslySetInnerHTML={{
__html: `if(document.fonts&&document.fonts.ready){document.fonts.ready.then(function(){document.documentElement.classList.add('fonts-loaded')})}else{document.documentElement.classList.add('fonts-loaded')}`,
__html: `var d=document,r=d.documentElement,f=function(){r.classList.add('fonts-loaded')};if(d.fonts&&d.fonts.load){d.fonts.load('24px "Material Symbols Outlined"').then(f).catch(f);setTimeout(f,3000)}else{f()}`,
}}
/>
</head>