From 183942fbaabc9b5a120f793d05397f975a034f55 Mon Sep 17 00:00:00 2001
From: teernisse <teernisse@visiostack.com>
Date: Wed, 25 Feb 2026 15:36:26 -0500
Subject: [PATCH] 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>
---
 dashboard/styles.css | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/dashboard/styles.css b/dashboard/styles.css
index 5fbac34..a2cc365 100644
--- a/dashboard/styles.css
+++ b/dashboard/styles.css
@@ -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);