chore(compass-welcome): plug in on connect #7442
Conversation
Anemy
added
the
no-title-validation
|
|
||
| // Easing function for smoother animation, the slight pull back and accelerate. | ||
| function easeWithSpring(t: number): number { | ||
| return t * t * (3.7 * t - 2.7); |
There was a problem hiding this comment.
If we want it to have more spring we can do something like
| return t * t * (3.7 * t - 2.7); | |
| return t * t * (5.7 * t - 4.7); |
That looks like:
with.more.bounce.mp4
I like how 8.7 looks also. We could move this into it's own variable (and some other things in this file) to make a few more knobs and have some of the constants better defined.
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the welcome tab component to replace the static WelcomePlugImage SVG with a new animated ConnectionPlug component that provides visual feedback during connection events.
- Removes the static
WelcomePlugImagecomponent and creates a new animatedConnectionPlugcomponent - Updates both web and desktop welcome tabs to use the new animated component
- Adds test coverage for the connection plug rendering behavior
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/compass-welcome/src/components/welcome-image.tsx | Removes the static WelcomePlugImage SVG component |
| packages/compass-welcome/src/components/web-welcome-tab.tsx | Updates imports and replaces WelcomePlugImage with ConnectionPlug |
| packages/compass-welcome/src/components/desktop-welcome-tab.tsx | Updates imports and replaces WelcomePlugImage with ConnectionPlug |
| packages/compass-welcome/src/components/connection-plug.tsx | Adds new animated ConnectionPlug component with connection state-based animations |
| packages/compass-welcome/src/components/web-welcome-tab.spec.tsx | Adds test coverage for connection plug rendering and improves test utility return value |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| if (rawProgress > 0.000001) { | ||
| animationFrameRef.current = requestAnimationFrame(animate); | ||
| } | ||
|
|
||
| setAnimationProgress((currentProgress) => | ||
| currentProgress <= 0.000001 ? currentProgress : newProgress | ||
| ); |
There was a problem hiding this comment.
The magic number 0.000001 is used as a threshold in multiple places without clear explanation. Consider defining this as a named constant like ANIMATION_THRESHOLD to improve code readability and maintainability.
Copilot uses AI. Check for mistakes.
| if (rawProgress < 0.99999) { | ||
| animationFrameRef.current = requestAnimationFrame(animate); | ||
| } |
There was a problem hiding this comment.
The magic number 0.99999 is used as a completion threshold without explanation. Consider defining this as a named constant like ANIMATION_COMPLETION_THRESHOLD to improve code clarity.
Copilot uses AI. Check for mistakes.
| setAnimationProgress((currentProgress) => | ||
| currentProgress >= 0.99999 ? currentProgress : easedProgress | ||
| ); |
There was a problem hiding this comment.
The same magic number 0.99999 is repeated here. This should use the same named constant as suggested in the previous comment to maintain consistency.
Copilot uses AI. Check for mistakes.
1 participant
light.mode.mp4
darkmode.connect.mp4
slow-mo
slowwww.mo.mp4