DEV Community

earlman
earlman

Posted on

Small Wins - A Seamless Bug Fix

So I was having an issue where my app wouldn't load once the user logged in.

Image description

The new "Timeline View" in Vuex Dev Tools was a huge help in dialing-in on where the problem was. I've been using it all week and it's incredibly well-built.

Image description

I initially thought that the route was being loaded before the AppConfig and UserConfig had a chance to be pulled from firebase. Looking at the code, I realized that I wasn't even pulling them from Firebase at all πŸ˜… More specifically, I pulled the config in on the initial page load, but not when the user logged in.

Image description

I really love the first time I'm able to implement a piece of knowledge seamlessly. In this case, it was the Promise.all function. In this case, I wait for both fetchAppConfig and fetchUserConfig to load before updating the router:

Image description

note: ToastError and ToastNotifications are just wrappers for Buefy component

I also made sure to notify the user before calling the promises. It could take a second to load the database and it might confuse users if there's no response on the page to clicking "Log In" button.

Final solution looks and feels great 😊

Image description

Top comments (0)