, etc. */
body.page-loading > *:not(#globalHeader):not(.page-loading-shimmer) {
visibility: hidden;
}
/* Shimmer placeholder — placed as direct child of , after #globalHeader */
.page-loading-shimmer {
display: none;
padding: 40px 20px;
max-width: 900px;
margin: 0 auto;
}
body.page-loading > .page-loading-shimmer {
display: block;
}
.page-loading-shimmer-bar {
height: 20px;
border-radius: var(--radius-md, 8px);
background: linear-gradient(90deg,
var(--color-bg-subtle, #f3f4f6) 25%,
var(--color-border, #e5e7eb) 50%,
var(--color-bg-subtle, #f3f4f6) 75%);
background-size: 200% 100%;
animation: page-shimmer 1.5s ease-in-out infinite;
margin-bottom: 16px;
}
.page-loading-shimmer-bar:nth-child(1) { width: 45%; height: 28px; margin-bottom: 24px; }
.page-loading-shimmer-bar:nth-child(2) { width: 90%; }
.page-loading-shimmer-bar:nth-child(3) { width: 75%; }
.page-loading-shimmer-bar:nth-child(4) { width: 85%; }
.page-loading-shimmer-bar:nth-child(5) { width: 60%; }
@keyframes page-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Dark mode */
[data-theme="dark"] .page-loading-shimmer-bar {
background: linear-gradient(90deg,
var(--color-bg-subtle, #2a2a2a) 25%,
var(--color-border, #333) 50%,
var(--color-bg-subtle, #2a2a2a) 75%);
background-size: 200% 100%;
animation: page-shimmer 1.5s ease-in-out infinite;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.page-loading-shimmer-bar {
animation: none;
}
}