Solving Logout Jank in Theme Context

TL;DR

• Remove theme resets to reduce logout jank caused by delayed navigation.
• Consider triggering state reset post successful logout from the onboarding component.
• Decide to control logout state change timing using context provider hooks.
• Initial approach exhibits slight jank but is acceptable for current functionality.
• Plan to improve UX by making spinner more prominent during async operations.

I’m in the trenches tackling an unexpected jank during user logout, which stems from the reset of the theme in the wasLogoutSuccessful state within the useEffect in the theme context controller. Removing the reset decreased the jank, but also meant navigating wasn’t happening promptly. This led to a critical realization: when initiating a sign-out, we can set isSigningOut to true and only confirm logout success once all credentials are cleared.

The core issue lay in understanding what signals “done” properly. Upon logout confirmation, the wasLogoutSuccessful should trigger subsequent actions, such as notifying and resetting states across components like the onboarding component. The plan is to provide logout methods in context providers to control state resets from a single point after the entire logout process.

Upon testing, I noticed some jank remains after a user logs out, but by that point, they likely don’t notice. It’s a balance between developer satisfaction and user experience. Despite the jank, I opted to push the changes; it’s a starting point for improvement.

Further, I’m planning additional UX improvements, such as making spinners more prominent and ensuring buttons deactivate during sign-in and sign-out processes. This approach should incrementally smooth the user experience and provide clearer guidance through asynchronous transitions.

Currently, this solution is a work in progress, but these insights highlight the importance of timing and state management in asynchronous workflows.