Lucas Berger
fa90b7cf86
- 06-04-SUMMARY: pulse keyframe checkpoint PASS (playwright-cli); CP-04.3 iOS device-only noted - 06-05-SUMMARY: TDD RED/GREEN + dead-end guard follow-up fix; playwright-cli cold-load + 401 PASS - 06-06-SUMMARY: end-tracking/recurrence-bound/series-prompt/all-day-pill; Schedule-X selector fix noted - ROADMAP: mark 06-04/05/06 complete; phase 6 row updated to 6/6 Complete 2026-06-10 - STATE: phase 06 position/status updated; 3 new metric rows; 6 new decisions; phase-level UX fixes (AppNav/BottomTabBar) documented; residual device-only items added to Blockers
83 lines
4.1 KiB
Markdown
83 lines
4.1 KiB
Markdown
---
|
||
phase: 06-ux-polish
|
||
plan: "04"
|
||
subsystem: pwa/styles
|
||
tags: [css, animation, d-13]
|
||
dependency_graph:
|
||
requires: []
|
||
provides:
|
||
- "@keyframes pulse (apps/pwa/src/styles/tokens.css)"
|
||
affects:
|
||
- LiveSyncIndicator (reconnecting dot now resolves the global pulse keyframe)
|
||
- PushPermissionPrompt (redundant local spin redefinition removed)
|
||
tech_stack:
|
||
added: []
|
||
patterns:
|
||
- Global keyframe resolution: all animation consumers reference tokens.css keyframes, not local <style> blocks
|
||
key_files:
|
||
created: []
|
||
modified:
|
||
- apps/pwa/src/styles/tokens.css
|
||
- apps/pwa/src/components/PushPermissionPrompt.tsx
|
||
decisions:
|
||
- D-13: @keyframes pulse added globally to tokens.css so the LiveSyncIndicator reconnecting dot animates regardless of component mount order; the redundant local spin redefinition in PushPermissionPrompt.tsx removed for hygiene
|
||
metrics:
|
||
duration_minutes: 5
|
||
completed_date: "2026-06-10"
|
||
tasks_completed: 2
|
||
files_changed: 2
|
||
---
|
||
|
||
# Phase 06 Plan 04: Sync-Indicator Animations (D-13) Summary
|
||
|
||
**One-liner:** Added global `@keyframes pulse` to tokens.css and removed the redundant local `@keyframes spin` block from PushPermissionPrompt.tsx so both sync-state animations resolve from the stylesheet.
|
||
|
||
## Tasks Completed
|
||
|
||
| Task | Name | Commit | Files |
|
||
|------|------|--------|-------|
|
||
| 1 | Add @keyframes pulse globally; remove redundant spin redefinition | `81f2678` | tokens.css, PushPermissionPrompt.tsx |
|
||
| 2 (checkpoint) | playwright-cli — confirm spinner spins and reconnecting dot pulses | (verification only) | — |
|
||
|
||
## What Was Built
|
||
|
||
The plan's corrected diagnosis was that `@keyframes spin` was already global in `tokens.css` (lines 140–147) so the SyncStateToast spinner already worked. The two real bugs were:
|
||
|
||
- **Missing `@keyframes pulse`** in `tokens.css` → `LiveSyncIndicator`'s reconnecting dot (`animation: 'pulse 1.4s ease-in-out infinite'`) never animated.
|
||
- **Redundant local `<style>` block** in `PushPermissionPrompt.tsx` that redefined `@keyframes spin` — harmless but incorrect; removed for hygiene.
|
||
|
||
Fix (commit `81f2678`):
|
||
- Added `@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }` to `tokens.css` directly after `@keyframes spin`, matching the existing block format (no vendor prefixes, no `animation-fill-mode` inside).
|
||
- Deleted the `<style>` block from `PushPermissionPrompt.tsx`. The inline `animation: 'spin 1s linear infinite'` style on the Loader2 element was left intact — it still resolves to the global keyframe.
|
||
- `LiveSyncIndicator.tsx` and `SyncStateToast.tsx` were not modified; their inline animation references are correct.
|
||
|
||
## Checkpoint Verification (Task 2)
|
||
|
||
Verified via playwright-cli against desktop Chromium with `DEV_AUTH_BYPASS=true`:
|
||
|
||
- **SyncStateToast Loader2 spinner** — computed `animationName === 'spin'`; transform sampled rotating (1s linear infinite). PASS.
|
||
- **LiveSyncIndicator reconnecting dot** — computed `animationName === 'pulse'`; opacity oscillating at 1.4s ease-in-out. PASS.
|
||
- No console errors about undefined keyframes.
|
||
|
||
No follow-up fixes were needed after the checkpoint.
|
||
|
||
## Residual Device-Only Item
|
||
|
||
**CP-04.3 (iOS device-only):** `PushPermissionPrompt`'s spinner renders only inside an installed iOS/standalone PWA — not drivable in desktop Chromium. Code-confirmed: the spinner uses the same inline `animation: 'spin 1s linear infinite'` that resolves to the global `@keyframes spin` in tokens.css. A human/device spot-check during Phase 3 Gate 2 or the go-live deploy is sufficient.
|
||
|
||
## Deviations from Plan
|
||
|
||
None — plan executed exactly as written.
|
||
|
||
## Threat Flags
|
||
|
||
None. Pure CSS keyframe addition and redundant inline-style deletion. No data, no network, no auth surface touched. T-06-04 accepted per threat model.
|
||
|
||
## Self-Check: PASSED
|
||
|
||
- `apps/pwa/src/styles/tokens.css` — FOUND (contains `@keyframes pulse`)
|
||
- `apps/pwa/src/components/PushPermissionPrompt.tsx` — FOUND (no `@keyframes spin` block)
|
||
- Commit `81f2678` — FOUND (`fix(06-04): add global pulse keyframe and drop redundant spin redefinition`)
|
||
- `@keyframes pulse` present exactly once in tokens.css — CONFIRMED
|
||
- No `@keyframes spin` in PushPermissionPrompt.tsx — CONFIRMED
|