Skip to content

Commit 78914f7

Browse files
aqaq
committed
feat: replace skeleton with simple spinner for FCP
- Simple rotating circle + Loading text - Hides when cards render - Less visual clutter than skeleton cards
1 parent dec331c commit 78914f7

3 files changed

Lines changed: 32 additions & 48 deletions

File tree

‎index.html‎

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

5050
<!-- Preload Critical Assets -->
51-
<link rel="preload" id="preload-css" href="dist/bundle.e3fffefb.css" as="style" crossorigin />
51+
<link rel="preload" id="preload-css" href="dist/bundle.76196769.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) -->
@@ -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.e3fffefb.css -->
69-
<link rel="stylesheet" id="bundle-css" href="dist/bundle.e3fffefb.css" media="print" onload="this.media='all'" />
70-
<noscript><link rel="stylesheet" href="dist/bundle.e3fffefb.css" /></noscript>
68+
<!-- Open Props is bundled in dist/bundle.76196769.css -->
69+
<link rel="stylesheet" id="bundle-css" href="dist/bundle.76196769.css" media="print" onload="this.media='all'" />
70+
<noscript><link rel="stylesheet" href="dist/bundle.76196769.css" /></noscript>
7171
</head>
7272
<body
7373
data-signals="{
@@ -1134,16 +1134,12 @@ <h1 class="visually-hidden">CSS Ref - CSS Properties Reference</h1>
11341134
class="is-grid"
11351135
data-effect="$viewMode; $selectedProp; $activeCollection; renderGrid(filtered($query, $activeCats, $activeInterops, $activeBrowsers), $selectedProp)"
11361136
>
1137-
<!-- Skeleton placeholder for FCP -->
1138-
<div class="grid-skeleton" aria-label="Loading properties...">
1139-
<div class="skeleton-card"></div>
1140-
<div class="skeleton-card"></div>
1141-
<div class="skeleton-card"></div>
1142-
<div class="skeleton-card"></div>
1143-
<div class="skeleton-card"></div>
1144-
<div class="skeleton-card"></div>
1145-
<div class="skeleton-card"></div>
1146-
<div class="skeleton-card"></div>
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>
11471143
</div>
11481144
</div>
11491145
</main>

‎src/styles/card.css‎

Lines changed: 21 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -49,49 +49,36 @@ main {
4949
display: grid;
5050
}
5151

52-
/* ── Skeleton Loading State ── */
53-
.grid-skeleton {
54-
display: grid;
55-
grid-template-columns: repeat(4, 1fr);
56-
gap: var(--space-2xs);
57-
}
58-
59-
@media (max-width: 900px) {
60-
.grid-skeleton {
61-
grid-template-columns: repeat(3, 1fr);
62-
}
63-
}
64-
65-
@media (max-width: 640px) {
66-
.grid-skeleton {
67-
grid-template-columns: repeat(2, 1fr);
68-
}
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);
6961
}
7062

71-
.skeleton-card {
72-
background: var(--card);
73-
border: 1px solid var(--border);
74-
border-radius: var(--radius-lg);
75-
padding: var(--space-m);
76-
min-height: 120px;
77-
position: relative;
78-
overflow: hidden;
79-
animation: skeleton-pulse 1.5s ease-in-out infinite;
63+
.spinner-icon {
64+
width: 40px;
65+
height: 40px;
66+
color: var(--primary);
67+
animation: spin 1s linear infinite;
8068
}
8169

82-
@keyframes skeleton-pulse {
83-
0%, 100% { opacity: 1; }
84-
50% { opacity: 0.5; }
70+
@keyframes spin {
71+
to { transform: rotate(360deg); }
8572
}
8673

87-
/* Hide skeleton when grid has real content (cards) */
88-
.is-grid:has(.card) .grid-skeleton {
74+
/* Hide spinner when cards render */
75+
.is-grid:has(.card) .grid-spinner {
8976
display: none;
9077
}
9178

92-
/* Show skeleton when no cards exist yet */
93-
.is-grid:not(:has(.card)) .grid-skeleton {
94-
display: grid;
79+
/* Show spinner when no cards */
80+
.is-grid:not(:has(.card)) .grid-spinner {
81+
display: flex;
9582
}
9683

9784
/* Responsive breakpoints for grid columns */

‎src/styles/detail.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
max-width: var(--grid-max-width);
2727
margin-inline: auto;
2828
padding: var(--space-l);
29+
padding-top: clamp(3.25rem, 5vw, 3.5rem);
2930
}
3031

3132
.back-btn {

0 commit comments

Comments
 (0)