From 14401c433c227bbd98342850069e975c51fbbd9e Mon Sep 17 00:00:00 2001 From: decolua Date: Fri, 28 Aug 2026 11:32:28 +0700 Subject: [PATCH] fix(ui): wait for the icon font itself before revealing Material Symbols MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `document.fonts.ready` resolved before the 4MB Material Symbols woff2 even started loading — it runs in , 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 --- src/app/globals.css | 4 ++-- src/app/layout.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 2a1434fe..95bb7686 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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 diff --git a/src/app/layout.js b/src/app/layout.js index 5ea6c11d..8e9b7609 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -34,7 +34,7 @@ export default function RootLayout({ children }) {