Why am I seeing this weird lag when going between pages?

Question

When clicking on an icon in the AppBar that's supposed to take me to my Profile page there is some weirdness. The contents of the Profile page immediately show up on top of the previous page and then a second later the Profile page loads and everything is fine. Same thing happens when going back from Profile page to the previous page.

Here is a link to the screen recording https://vimeo.com/user99110764/review/339241883/a39312e6d8

Below is the code for the Profile button that is in the AppBar

class ProfileButton extends StatelessWidget {

  final store = AppStore.store;

  @override
  Widget build(BuildContext context) {

    return IconButton(
      onPressed: () async {
        if (store.state.userState.user == null) {
          AppNavigator.signInPage();
        } else {
          AppNavigator.profilePage();
        }
      },
      tooltip: 'Profile',
      icon: Icon(Icons.person),
    );
  }
}

EDIT:

static profilePage() {
  navigator.currentState.pushNamed('/profile');
}

static signInPage() {
  navigator.currentState.pushNamed('/sign_in');
}

Since the video is not working I'll try to explain what's happening. I'm on the main page of the app that has a list view. I click on the profile button in the AppBar after I've already signed in so it navigates to the Profile page, but what happens is that the contents of the Profile page (image + logout button) get immediately rendered on top of the main page and after about a second, the background of the Profile page loads and everything looks how it's supposed to.

Answer 1

An async function uses the await expression. Hopefully, this could help... Dart asynchronous programming