fix(dashboard): spinner animation polish and accessibility

Polish the working indicator animations:

- Use cubic-bezier easing for smoother spinner rotation
- Add will-change hints for GPU acceleration
- Add display: inline-block to bounce-dot spans (required for transform)
- Add prefers-reduced-motion media query to disable animations for
  motion-sensitive users (accessibility)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
teernisse
2026-02-25 15:36:26 -05:00
parent 2f80995f8d
commit 183942fbaa

View File

@@ -84,7 +84,8 @@ body {
border-radius: 50%;
border: 1.5px solid transparent;
border-top-color: currentColor;
animation: spin-ring 0.8s linear infinite;
will-change: transform;
animation: spin-ring 0.9s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
/* Working indicator at bottom of chat */
@@ -93,10 +94,28 @@ body {
40% { transform: translateY(-4px); }
}
.working-dots span {
display: inline-block;
will-change: transform;
}
.working-dots span:nth-child(1) { animation: bounce-dot 1.2s ease-in-out infinite; }
.working-dots span:nth-child(2) { animation: bounce-dot 1.2s ease-in-out 0.15s infinite; }
.working-dots span:nth-child(3) { animation: bounce-dot 1.2s ease-in-out 0.3s infinite; }
/* Accessibility: disable continuous animations for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
.spinner-dot::after {
animation: none;
}
.working-dots span {
animation: none;
}
.pulse-attention {
animation: none;
}
}
/* Glass panel effect */
.glass-panel {
backdrop-filter: blur(10px);