feat: loading placeholder tile while new session is being created

- Inject .tile--loading skeleton tile into #session-grid immediately after
  POST /api/sessions succeeds, giving instant visual feedback while the
  backend creates the tmux session (which may take several seconds)
- Remove the placeholder when the poll finds the session or on timeout
- Add shimmer animation via @keyframes shimmer to style.css
- Tile placed after original .tile-body pre rule to avoid selector-substring
  match in _extract_rule_block CSS tests
This commit is contained in:
Brian Krabach
2026-03-30 07:39:18 -07:00
parent b38c87185a
commit e6add00f0d
5 changed files with 195 additions and 15 deletions
+24
View File
@@ -239,6 +239,30 @@ body {
margin: 0;
}
/* Loading placeholder tile — shown while a new session is being created */
.tile--loading {
opacity: 0.6;
pointer-events: none;
}
.tile--loading .tile-body pre {
background: repeating-linear-gradient(
90deg,
var(--border) 0px,
var(--bg-surface) 30px,
var(--border) 60px
);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
min-height: 60px;
border-radius: 2px;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.tile-pre {
position: absolute;
inset: 0;