I have an issue where my main UI is still displayed for a few seconds after clicking a logout button.

As a result the login form component displays momentarily inside the main UI template before going on to display on a blank page.

I have an App.vue file with this set up.

<template>
  <v-app id="app">
    <template v-if="!signedIn">
      <router-view></router-view>
    </template>
    <template v-if="signedIn">   
     // main app UI here ...still shows for a couple of seconds with the login form inside it 
    </template>
</template>

The signedIn value determines if the main app ui is shown or not. It works, but as I say there is a some time where both the main UI and the login form appear in the interface.

I have the following route middleware set up where the userModule.checkUserSignedIn simply gets the current value of signedIn.

function requireAuth(to: TODO, from: TODO, next: TODO) {

      if (!userModule.checkUserSignedIn()) {
        console.log('User not signed in..')
        next({
          path: "/login",
          query: { redirect: to.fullPath }
        });
      } else {
        console.log('User is signed in..')
        next();
      }
    } 
})

The login route is simple.

{ path: "/login", component: Login, name: "Login" }

I am not sure what is causing this to happen and have run into a bit of a dead end. If anyone can help me figure out how to fix this I'd much appreciate it. Thanks in advance!