[kernel:781] update loading logo animation to pulse #119
Conversation
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| align-items: center; | ||
| .window { | ||
| max-width: 70vw; |
There was a problem hiding this comment.
Window styling accidentally removed breaking visual appearance
High Severity
The .window class lost essential styling properties (background, border-radius, max-width/width, max-height, overflow, padding) that were accidentally deleted. This PR was only meant to update the animation to pulse, but these unrelated style removals will cause the window to appear transparent/unstyled with no size constraints, breaking the UI completely.
Additional Locations (1)
| .kernel-logo { | ||
| animation: none; | ||
| } | ||
| animation: kernel-logo-pulse 1.5s ease-in-out infinite; |
There was a problem hiding this comment.
Removed accessibility check for reduced motion preference
Medium Severity
The @media (prefers-reduced-motion: reduce) blocks that previously disabled animation for users who have configured their system to prefer reduced motion were removed. This was an existing accessibility feature, not defensive coding. Users with vestibular disorders who explicitly requested no animations will now see the continuous pulse animation, which can cause physical discomfort.
Additional Locations (1)
![tembo[bot]](https://avatars.githubusercontent.com/in/1223475?s=60&v=4){kind=small}
There was a problem hiding this comment.
Nice improvement switching to a pulse animation.
Main things I noticed in the diff:
about.vuehas a small CSS syntax typo in the new keyframes (scale(1.2;) that will invalidate the animation.- Consider keeping a
prefers-reduced-motionescape hatch (it was removed in this change) so users who opt out of motion aren’t forced to see the pulse. - The
@keyframesblock is duplicated across both components; if it’s meant to stay consistent, a shared style would reduce drift.
| to { | ||
| transform: rotate(360deg); | ||
| 50% { | ||
| transform: scale(1.2; |
There was a problem hiding this comment.
transform: scale(1.2; looks like a syntax typo (missing )), which will break the whole @keyframes block.
| transform: scale(1.2; | |
| transform: scale(1.2); |
| .kernel-logo { | ||
| animation: none; | ||
| } | ||
| animation: kernel-logo-pulse 1.5s ease-in-out infinite; |
There was a problem hiding this comment.
Since this animates continuously, I’d keep the prefers-reduced-motion: reduce override that was removed (or at least reduce/disable the pulse) so we don’t force motion for users who opt out. Same applies in connect.vue.
| @keyframes kernel-logo-spin { | ||
| from { | ||
| transform: rotate(0deg); | ||
| @keyframes kernel-logo-pulse { |
There was a problem hiding this comment.
kernel-logo-pulse is defined in both about.vue and connect.vue now. If this is intended to stay identical, might be worth hoisting to a shared stylesheet/SCSS partial so tweaks (duration/scale/reduced-motion) don’t drift between components.
|
Gah, sorry I'm not being specific enough. |
|
@archandatta @juecd i think we can close this right? |
|
@masnwilliams this is a continuation of #118 to remove the spin |
archandatta
deleted the
archand/kernel-781/update-loading-icon-animation
branch
Screen.Recording.2026-01-14.at.12.51.36.PM.mov
Note
Updates the loading experience across the about and connect screens.
kernel-logo-spintokernel-logo-pulsewith new keyframes and applies it to.kernel-logoin bothabout.vueandconnect.vue.windowcontainer styling by dropping width/background/padding/max size/overflow rules (retains scrollbar styling)Written by Cursor Bugbot for commit 8d07457. This will update automatically on new commits. Configure here.