feat(retro): prompt user to go to next phase or end meeting

[JimmyLv]

Description

Resolved #6815 After inactivity, the user will see the "next" item in the toolbar do a wiggle animation to hint at the next step. This will only appear for the facilitator.

Demo

~~https://www.loom.com/share/73d4c6d84f7d420881373f1f794b076e~~ https://www.loom.com/share/aa33f812fd83490ab690e63c9e2f3080

Testing scenarios

1. Reflect phase: when there are no reflections in progress for 30s

2. Group phase: when nothing has moved after 30s

3. Vote phase: When the remaining votes is at zero for 30s or has not changed for 30s

4. Discuss phase: this is a tricky one since a lot could be happening sync in a call, we hint after 5 minutes

Caveat : if the ready button is "full" before these conditions are met, the animation should start after 5s

Final checklist

• [x] I checked the code review guidelines
• [ ] I have added Metrics Representative as reviewer(s) if my PR invovles metrics/data/analytics related changes
• [x] I have performed a self-review of my code, the same way I'd do it for any other team member
• [x] I have tested all cases I listed in the testing scenarios and I haven't found any issues or regressions
• [x] Whenever I took a non-obvious choice I added a comment explaining why I did it this way
• [x] I added the label One Review Required if the PR introduces only minor changes, does not contain any architectural changes or does not introduce any new patterns and I think one review is sufficient'
• [x] PR title is human readable and could be used in changelog

[JimmyLv]

Hey @igorlesnenko after confirming with @acressall (cc Design Reviewer based on our new process 😁), I already updated to animate the next button, could you please help to have a look again?

new Loom demo: https://www.loom.com/share/aa33f812fd83490ab690e63c9e2f3080

for another two cases, I've fixed them too:

If I open a demo, click next on reflect phase without waiting for it to finish. Then wait on the group phase. Animation will never appear. Is it expected behaviour?

This is probably due to the previous judgement logic, which is now handled to allow skipping the wait directly, i.e. the grouping phase also triggers the animation.

when I start meeting I instantly see button animation on the reflect phase.

This is because I didn't judge hasNoReflection at first, which means the animation was triggered immediately without any input from anyone

[igorlesnenko]

@JimmyLv the button is now animating almost right after creating first reflection, should we wait longer or it is expected behaviour? https://www.loom.com/share/ae706afeb701430cbbd94a3ca541d00f

[JimmyLv]

@igorlesnenko Good find, it does animation quickly when there is only 1 user, I have changed the delay seconds to 30s, i.e.

when there are no reflections in progress for 30s

[mattkrick]

Clarifying questions:

• how might we measure the success of these animations?
• how might we avoid distracting the viewer with an animation while they are processing the reflections?

[acressall]

@mattkrick here's some extra context: We discussed starting this just on the demo. We're especially seeing large dropoff from starting a demo to advance to grouping. We would use the demo funnel as our metric to track.

how might we avoid distracting the viewer with an animation while they are processing the reflections?

The hope was to time this so it wouldn't display until a user felt stuck or confused. If we feel unsure about this, there are a few things we could look at:

• Adjusting the timing
• Limiting who sees it (when it's your first meeting? Wouldn't matter as much if just demo)
• Changing the trigger -- display when a user mouses over the left nav, rather than using time as our indicator for "stuck".
• Open to other ideas, thoughts, or concerns!

In user testing, some users navigated via the sidebar exclusively, and others via the toolbar exclusively. When using the sidebar, there was occasionally some confusion about the concept of phases for users who are more familiar with whiteboard style where everything happens on the same view. Highlighting the "next" terminology might be helpful to show that there is something else that needs to be done. This is the crux of what we're trying to solve for

[JimmyLv]

Hi @Dschoordsch, I did some refactoring Improvement, could you please help to have a look again?