Skip to content

Commit 7e76cbb

Browse files
aqaq
committed
feat: add fixed spinner overlay for FCP
- Fixed spinner outside grid-view (always on top) - z-index:99999 to cover header - Hardcoded colors for reliability - Hidden when renderGrid executes
1 parent 96d803c commit 7e76cbb

2 files changed

Lines changed: 19 additions & 44 deletions

File tree

‎index.html‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,11 @@
4848
<title>CSS Ref</title>
4949

5050
<!-- Preload Critical Assets -->
51-
<link rel="preload" id="preload-css" href="dist/bundle.b6fb39be.css" as="style" crossorigin />
51+
<link rel="preload" id="preload-css" href="dist/bundle.2022f922.css" as="style" crossorigin />
5252
<link rel="preload" id="preload-js" href="dist/bundle.40ef2de0.js" as="script" crossorigin />
5353

5454
<!-- Critical CSS (inlined for faster FCP/LCP) -->
55-
<style>:root{--background:#0f172a;--foreground:#f8fafc;--border:#1e293b;--card:#1e293b;--card-foreground:#f8fafc;--primary:#e78a53;--primary-foreground:#0f172a;--secondary:#5f8787;--secondary-foreground:#0f172a;--muted:#1e293b;--muted-foreground:#94a3b8;--radius:.2rem;--radius-sm:.15rem;--radius-md:.2rem;--radius-lg:.28rem;--radius-xl:.36rem;--radius-round:9999px;--shadow-xs:0 1px 4px rgba(0,0,0,.03);--shadow-sm:0 1px 4px rgba(0,0,0,.05),0 1px 2px -1px rgba(0,0,0,.05);--shadow:0 1px 4px rgba(0,0,0,.05),0 1px 2px -1px rgba(0,0,0,.05);--shadow-md:0 1px 4px rgba(0,0,0,.05),0 2px 4px -1px rgba(0,0,0,.05);--shadow-lg:0 1px 4px rgba(0,0,0,.05),0 4px 6px -1px rgba(0,0,0,.05);--shadow-xl:0 1px 4px rgba(0,0,0,.05),0 8px 10px -1px rgba(0,0,0,.05);--space-3xs:.3125rem;--space-2xs:.5625rem;--space-xs:.875rem;--space-s:1.125rem;--space-m:1.6875rem;--space-l:2.25rem;--space-xl:3.375rem;--space-2xl:4.5rem;--space-3xl:6.75rem;--font-sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--grid-max-width:77.5rem}.grid-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;gap:var(--space-m);color:var(--muted-foreground)}.spinner-icon{width:40px;height:40px;color:var(--primary);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}*{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-sans);line-height:1.5;-webkit-font-smoothing:antialiased}body{background:var(--background);color:var(--foreground);min-height:100vh;overflow-x:hidden}header{position:sticky;top:0;z-index:100;background:rgba(15,23,42,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:4px 8px;display:flex;align-items:center;gap:8px}.brand{display:flex;align-items:center;flex-shrink:0;cursor:pointer}.brand-logo{height:2rem;width:auto}.search-shell{flex:1;min-width:200px;position:relative}.view-mode-toggles{display:flex;gap:4px}#grid-view{width:100%;padding:var(--space-l);max-width:var(--grid-max-width);margin-inline:auto;min-height:400px}#grid.is-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2xs)}@media(max-width:900px){#grid.is-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px)#grid.is-grid{grid-template-columns:repeat(2,1fr)}#grid.is-list{display:flex;flex-direction:column;gap:var(--space-2xs)}.card{background:var(--card);border-radius:var(--radius-lg);border:1px solid var(--border);cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;display:flex;flex-direction:column}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);background:var(--card)}.demo-stage{height:155px;overflow:visible;position:relative;background:var(--muted);display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:.7rem;user-select:none}.demo-stage>div:first-child{width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}.demo-stage *{box-sizing:border-box}.card-meta{display:flex;align-items:center;padding:var(--space-xs) var(--space-xs) var(--space-2xs);background:var(--card);border-top:1px solid var(--border);min-height:2.2rem}.demo-stage .cat-badge{position:absolute;bottom:0;left:var(--space-xs);z-index:10;transform:translateY(48%);font-size:.63rem;font-weight:700;padding:.15rem .35rem;border-radius:var(--radius-lg);white-space:nowrap;color:var(--primary-foreground);background:var(--primary);box-shadow:0 2px 8px rgba(0,0,0,.15)}.card-name-wrap{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(to right,black 85%,transparent 100%);-webkit-mask-image:linear-gradient(to right,black 85%,transparent 100%)}.card-name{font-family:var(--font-sans);font-size:1rem;font-weight:800;color:var(--card-foreground);line-height:1.2;margin:0;white-space:nowrap}.property-card{background:var(--border);border-radius:var(--radius-lg);padding:1rem;min-height:200px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}</style>
55+
<style>:root{--background:#0f172a;--foreground:#f8fafc;--border:#1e293b;--card:#1e293b;--card-foreground:#f8fafc;--primary:#e78a53;--primary-foreground:#0f172a;--secondary:#5f8787;--secondary-foreground:#0f172a;--muted:#1e293b;--muted-foreground:#94a3b8;--radius:.2rem;--radius-sm:.15rem;--radius-md:.2rem;--radius-lg:.28rem;--radius-xl:.36rem;--radius-round:9999px;--shadow-xs:0 1px 4px rgba(0,0,0,.03);--shadow-sm:0 1px 4px rgba(0,0,0,.05),0 1px 2px -1px rgba(0,0,0,.05);--shadow:0 1px 4px rgba(0,0,0,.05),0 1px 2px -1px rgba(0,0,0,.05);--shadow-md:0 1px 4px rgba(0,0,0,.05),0 2px 4px -1px rgba(0,0,0,.05);--shadow-lg:0 1px 4px rgba(0,0,0,.05),0 4px 6px -1px rgba(0,0,0,.05);--shadow-xl:0 1px 4px rgba(0,0,0,.05),0 8px 10px -1px rgba(0,0,0,.05);--space-3xs:.3125rem;--space-2xs:.5625rem;--space-xs:.875rem;--space-s:1.125rem;--space-m:1.6875rem;--space-l:2.25rem;--space-xl:3.375rem;--space-2xl:4.5rem;--space-3xl:6.75rem;--font-sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--grid-max-width:77.5rem}@keyframes spin{to{transform:rotate(360deg)}}*{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-sans);line-height:1.5;-webkit-font-smoothing:antialiased}body{background:var(--background);color:var(--foreground);min-height:100vh;overflow-x:hidden}header{position:sticky;top:0;z-index:100;background:rgba(15,23,42,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:4px 8px;display:flex;align-items:center;gap:8px}.brand{display:flex;align-items:center;flex-shrink:0;cursor:pointer}.brand-logo{height:2rem;width:auto}.search-shell{flex:1;min-width:200px;position:relative}.view-mode-toggles{display:flex;gap:4px}#grid-view{width:100%;padding:var(--space-l);max-width:var(--grid-max-width);margin-inline:auto;min-height:400px}#grid.is-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2xs)}@media(max-width:900px){#grid.is-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px)#grid.is-grid{grid-template-columns:repeat(2,1fr)}#grid.is-list{display:flex;flex-direction:column;gap:var(--space-2xs)}.card{background:var(--card);border-radius:var(--radius-lg);border:1px solid var(--border);cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;display:flex;flex-direction:column}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);background:var(--card)}.demo-stage{height:155px;overflow:visible;position:relative;background:var(--muted);display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:.7rem;user-select:none}.demo-stage>div:first-child{width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}.demo-stage *{box-sizing:border-box}.card-meta{display:flex;align-items:center;padding:var(--space-xs) var(--space-xs) var(--space-2xs);background:var(--card);border-top:1px solid var(--border);min-height:2.2rem}.demo-stage .cat-badge{position:absolute;bottom:0;left:var(--space-xs);z-index:10;transform:translateY(48%);font-size:.63rem;font-weight:700;padding:.15rem .35rem;border-radius:var(--radius-lg);white-space:nowrap;color:var(--primary-foreground);background:var(--primary);box-shadow:0 2px 8px rgba(0,0,0,.15)}.card-name-wrap{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(to right,black 85%,transparent 100%);-webkit-mask-image:linear-gradient(to right,black 85%,transparent 100%)}.card-name{font-family:var(--font-sans);font-size:1rem;font-weight:800;color:var(--card-foreground);line-height:1.2;margin:0;white-space:nowrap}.property-card{background:var(--border);border-radius:var(--radius-lg);padding:1rem;min-height:200px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}</style>
5656

5757
<!-- Stylesheets -->
5858
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -65,9 +65,9 @@
6565
<noscript>
6666
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789%20.,!?;:'&quot;()-_@#$%&amp;*+=&lt;&gt;[]{}|\/^~`" />
6767
</noscript>
68-
<!-- Open Props is bundled in dist/bundle.b6fb39be.css -->
69-
<link rel="stylesheet" id="bundle-css" href="dist/bundle.b6fb39be.css" media="print" onload="this.media='all'" />
70-
<noscript><link rel="stylesheet" href="dist/bundle.b6fb39be.css" /></noscript>
68+
<!-- Open Props is bundled in dist/bundle.2022f922.css -->
69+
<link rel="stylesheet" id="bundle-css" href="dist/bundle.2022f922.css" media="print" onload="this.media='all'" />
70+
<noscript><link rel="stylesheet" href="dist/bundle.2022f922.css" /></noscript>
7171
</head>
7272
<body
7373
data-signals="{
@@ -1126,22 +1126,22 @@ <h1 class="visually-hidden">CSS Ref - CSS Properties Reference</h1>
11261126
VIEWS
11271127
============================== -->
11281128

1129+
<!-- Fixed spinner - shows immediately on FCP, hidden by JS -->
1130+
<div id="fcp-spinner" style="position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#0f172a;z-index:99999;color:#f8fafc">
1131+
<svg width="48" height="48" viewBox="0 0 24 24" style="animation:spin 1s linear infinite;color:#e78a53">
1132+
<circle cx="12" cy="12" r="10" stroke="#e78a53" stroke-width="3" fill="none" stroke-dasharray="60" stroke-dashoffset="20"/>
1133+
</svg>
1134+
<span style="font-size:14px;color:#94a3b8">Loading...</span>
1135+
</div>
1136+
11291137
<!-- Grid View - Declarative rendering with data-effect -->
11301138
<div id="grid-view" data-show="$viewMode === 'grid' && $selectedProp === '' && $activeCollection === ''">
11311139
<main id="main-content">
1132-
<div
1133-
id="grid"
1134-
class="is-grid"
1135-
data-effect="$viewMode; $selectedProp; $activeCollection; renderGrid(filtered($query, $activeCats, $activeInterops, $activeBrowsers), $selectedProp)"
1136-
>
1137-
<!-- Simple spinner for FCP -->
1138-
<div class="grid-spinner">
1139-
<svg class="spinner-icon" viewBox="0 0 24 24">
1140-
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="60" stroke-dashoffset="20" />
1141-
</svg>
1142-
<span>Loading...</span>
1143-
</div>
1144-
</div>
1140+
<div
1141+
id="grid"
1142+
class="is-grid"
1143+
data-effect="$viewMode; $selectedProp; $activeCollection; document.getElementById('fcp-spinner').style.display='none'; renderGrid(filtered($query, $activeCats, $activeInterops, $activeBrowsers), $selectedProp)"
1144+
></div>
11451145
</main>
11461146
</div>
11471147
<!-- End Grid View -->

‎src/styles/card.css‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -49,32 +49,7 @@ main {
4949
display: grid;
5050
}
5151

52-
/* ── Simple Spinner for FCP ── */
53-
.grid-spinner {
54-
display: flex;
55-
flex-direction: column;
56-
align-items: center;
57-
justify-content: center;
58-
min-height: 50vh;
59-
gap: var(--space-m);
60-
color: var(--muted-foreground);
61-
}
62-
63-
.spinner-icon {
64-
width: 40px;
65-
height: 40px;
66-
color: var(--primary);
67-
animation: spin 1s linear infinite;
68-
}
69-
70-
@keyframes spin {
71-
to { transform: rotate(360deg); }
72-
}
73-
74-
/* Hide spinner when cards exist */
75-
.is-grid:has(.card) .grid-spinner {
76-
display: none !important;
77-
}
52+
/* ── Spinner CSS moved to index.html for FCP ── */
7853

7954
/* Responsive breakpoints for grid columns */
8055
@media (max-width: 900px) {

0 commit comments

Comments
 (0)