Implement smooth transitions between other screens and the primary room

[darcydriscoll]

🏖️ Definition of done

• [x] The sign in screen transitions to the primary room smoothly
• [x] The primary room transitions to the sign in screen smoothly
• [x] Follows a11y standards

🏕️ Problem-solving

🎠 Explore the problem

Are Vue transitions accessible?

• Yes
• Use the prefers-reduced-motion CSS feature for transitions that involve big moving objects (dissolves seem to be fine?)
  • Depends on the person. This author is triggered by things like collapsible menu bars
• If I ever use JavaScript hooks with transitions, I should look into this npm module

How do we make transitions 'smooth'?

i.e. how do we replace one screen with another without it glitching?

• I think it stems from a Vue attribute I'm not setting?
  • Yep: the mode attribute

🛫 Method

• [x] Simple dissolve transitions between sign in screen and primary room
• [x] 'Dissolve up' transition for primary room
• [x] Use router navigation guards for authentication instead of created()
• [x] a11y
  • [x] Setup prefers-reduced-motion for sign-in and 'dissolve up' animations (fixes all dissolves)
  • [x] Setup prefers-reduced-motion for loading icon on sign in screen

📝 Notes

[darcydriscoll]

We should probably authenticate the user through a Vue Router navigation guard rather than the Vue created() function

[darcydriscoll]

Whoops...

[darcydriscoll]

We need to remove the user authentication from the ChatRoom component!

[darcydriscoll]

We need to remove the user authentication from the ChatRoom component!

Done. Also, realised I didn't implement the navigation guard user authentication properly. I needed to ensure that the verifyAccess() function returned a Promise, make the navigation guard function async, and return an awaited function invocation in that navigation guard function.

[darcydriscoll]

Done!