Improve startup responsiveness and admin prompt motion

2026-07-22 17:50:12 +03:00
parent 90ec4ca086
commit 9c987df6e9
11 changed files with 597 additions and 183 deletions
@@ -47,6 +47,21 @@ src/app/components/SingBoxWorkspace.tsx
 - Use `aria-*` for tabs, toggle buttons, popovers, service controls.
 - Honor reduced motion where relevant.

+## Animated disclosures
+
+- Keep disclosure content mounted through opening and closing so both directions can animate. Do not conditionally render content directly into its final open state.
+- Keep the trigger at one screen position and separate layout placement from hover/active transforms.
+- Gate hidden content with `aria-hidden` plus `inert` or `tabIndex`; opacity and `pointer-events` alone do not remove controls from keyboard navigation.
+- Keep `aria-expanded` and `aria-controls` on the trigger synchronized with the rendered state.
+- Use one motion origin and timeline for background, copy, and actions. Implement and verify the reverse transition at the same time as the entrance.
+
+## Startup responsiveness
+
+- Render the shell and saved/default configuration immediately. Do not gate first paint on network access, subscription refresh, or every component probe.
+- Show slow component detection in reserved `checking` geometry and apply partial results as they arrive without replaying page entrance motion.
+- Do not serialize independent probes to create a staged UI. When the backend exposes only an aggregate snapshot, animate reserved placeholders and replace their values in place when that snapshot arrives.
+- Keep navigation and already-known configuration usable while background detection continues.
+
 ## Proxy/routing UI

 When editing route UI:
@@ -71,6 +86,7 @@ Recommended for extracted pure logic:
 - Unit tests for readiness states.
 - Unit tests for snapshot diff/change dock model.
 - UI smoke checks for desktop and narrow layout.
+- For hover, disclosure, or motion changes, exercise first open, close, repeated toggle, hover during transition, keyboard focus, loading copy, and `prefers-reduced-motion`. Build and unit tests do not validate these behaviors.

 ## Do not