svemagie/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-04-02 16:44:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add skeleton loader to prevent FOUC during CSS load

Browse Source 
Replace unstyled content flash with pulsing gray placeholder shapes
while the deferred Tailwind stylesheet loads. Uses a 'loading' class
on <html> that critical CSS uses to show skeleton / hide content,
removed by the stylesheet's onload handler.

Includes noscript fallback to bypass skeleton when JS is disabled.

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
This commit is contained in:
Ricardo
2026-03-07 16:56:59 +01:00
parent f5e6dfbc8a
commit 15b88b7087
2 changed files with 31 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
css/critical.css
View File

@@ -59,3 +59,11 @@ a{color:#b45309}
/* Prevent FOUC — constrain images and SVG icons before Tailwind loads */
img{max-width:100%;height:auto}
svg:not(:root):not([width]){width:1.25rem;height:1.25rem}
/* Skeleton loader — visible until Tailwind stylesheet loads */
html.loading main.container>.page-content{display:none}
html:not(.loading) .page-skeleton{display:none}
@keyframes skel-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.skel-bone{background:#e8e5df;border-radius:.5rem;animation:skel-pulse 1.5s ease-in-out infinite}
.dark .skel-bone{background:#3f3b35}
.skel-circle{border-radius:50%}