Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ref(quick-start): Add task completion animation #82523

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

ref(quick-start): Add task completion animation #82523

wants to merge 9 commits into from
+120 −80

Conversation

priscilawebdev
Copy link
Member

@priscilawebdev priscilawebdev commented Dec 23, 2024 •
edited
Loading

closes https://github.com/getsentry/projects/issues/337

Preview

Screen.Recording.2024-12-23.at.15.54.57.mov

Note
Maybe we want to add a delay when skipping the last task in the group? 🤔

@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Dec 23, 2024
@priscilawebdev priscilawebdev marked this pull request as ready for review December 23, 2024 14:41
@priscilawebdev
Copy link
Member Author

@ale-cota @evanpurkhiser what do you think of the animation?

@priscilawebdev priscilawebdev requested a review from a team December 23, 2024 14:42
@codecov Codecov
Copy link

codecov bot commented Dec 23, 2024 •
edited
Loading

❌ 1 Tests Failed:

Tests completed Failed Passed Skipped
8457 1 8456 0
View the top 1 failed tests by shortest run time 
NewSidebar show skipable confirmation when skipping a task
Stack Traces | 0.48s run time 
Error: The element(s) given to waitForElementToBeRemoved are already removed. waitForElementToBeRemoved requires that the element(s) exist(s) before waiting for removal.
    at initialCheck (.../sentry/sentry/node_modules/@.../dom/dist/wait-for-element-to-be-removed.js:14:11)
    at waitForElementToBeRemoved (.../sentry/sentry/node_modules/@.../dom/dist/wait-for-element-to-be-removed.js:31:3)
    at Object.<anonymous> (.../components/onboardingWizard/newSidebar.spec.tsx:162:62)

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

@evanpurkhiser
Copy link
Member

Feels a bit slow

vgrozdanic
vgrozdanic reviewed Dec 23, 2024
View reviewed changes
static/app/components/onboardingWizard/newSidebar.tsx Outdated
/**
* How long (in ms) to delay before beginning to mark tasks complete
*/
const INITIAL_MARK_COMPLETE_TIMEOUT = 600;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Should we maybe make this smaller, it seems pretty slow in the video you have shared, i am not sure if users will wait and keep attention that long at the tasks list?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes the same feedback I got from Evan... I will set 450 and see if it improves

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the speed of the animation itself also feels slow. Like the actual motion. I would expect them to switch around a bit snappier. We had animation on these before right?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes we did have but I find the animation not very smooth/natural. do you prefer that?

Screen.Recording.2024-12-23.at.16.34.03.mov

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually think this feels better. Snappier animation generally makes the app feel a little bit "faster" if that makes sense

vgrozdanic
vgrozdanic reviewed Dec 23, 2024
View reviewed changes
static/app/components/onboardingWizard/newSidebar.tsx Outdated
.map(task => task.task);

for (const task of unseenTasks) {
updateOnboardingTask(api, organization, {task, completionSeen: true});
Copy link
Member

@vgrozdanic vgrozdanic Dec 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is there no way to have only 1 api call?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no we have to update the backend

@priscilawebdev
Copy link
Member Author

@evanpurkhiser I applied your feedback and updated the animation to be snappier for now. We're discussing this internally, so I might need to make further changes in another PR. Let's see 🙂

@priscilawebdev
fix tests
804c9fd
@priscilawebdev
Merge branch 'priscila/ref/quick-start/add-animation' of github.com:g…
9e80baf 
…etsentry/sentry into priscila/ref/quick-start/add-animation
@priscilawebdev priscilawebdev enabled auto-merge (squash) January 3, 2025 07:58
@codecov Codecov
Copy link

codecov bot commented Jan 3, 2025 •
edited
Loading

Bundle Report

Changes will increase total bundle size by 716 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
app-webpack-bundle-array-push 32.18MB 716 bytes (0.0%) ⬆️

@priscilawebdev
fix test
52ccfac
@priscilawebdev
Merge branch 'priscila/ref/quick-start/add-animation' of github.com:g…
c709da2 
…etsentry/sentry into priscila/ref/quick-start/add-animation
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@vgrozdanic vgrozdanic vgrozdanic approved these changes

@evanpurkhiser evanpurkhiser Awaiting requested review from evanpurkhiser

Assignees
No one assigned
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@priscilawebdev @evanpurkhiser @vgrozdanic