Expose a userLoaded state from useCurrentUser to avoid "flash of logged out nav"

[Soviut]

What problem is this solving

The useCurrentUser composable returns a nullable ref of the current user. However, it can also be undefined while the user is still loading. It is common practice to hide navigation to areas that a logged out user should not be able to access. If a user is logged in already and refreshes the page they will see a brief "flash of logged out nav" before the user finishes loading and the logged in nav appears.

<script setup>
const currentUser = useCurrentUser()
</script>

<nav>
  <router-link v-if="currentUser" to="/logout">Logout</router-link>
  <router-link v-else to="/login">Login</router-link>
</nav>

Proposed solution

It would be useful if an explicit userLoaded state were exposed from the useCurrentUser composable. Something that does the following.

const userLoaded = computed(() => typeof currentUser.value !== 'undefined')

So that it could be used like this.

<script setup>
const { currentUser, userLoaded } = useCurrentUser()
</script>

<nav v-show="userLoaded">
  <router-link v-if="currentUser" to="/logout">Logout</router-link>
  <router-link v-else to="/login">Login</router-link>
</nav>

I've found that using v-show is best in this case since it doesn't cause the DOM to reflow like v-if does on the top level nav.

Describe alternatives you've considered

Currently I do the following instead.

<script setup>
const currentUser = useCurrentUser()
const userLoaded = computed(() => typeof currentUser.value !== 'undefined')
</script>

<nav v-show="userLoaded">
  <router-link v-if="currentUser" to="/logout">Logout</router-link>
  <router-link v-else to="/login">Login</router-link>
</nav>

I realize this isn't a lot of work to do, but having a formal implementation would mean it's easier to document the pattern.

Additional Considerations

This would change how the API works since useCurrentUser returns a user, not an object with a user in it.

[posva]

I would rather not break the API unless necessary or if it really improves it. In this case, I think exposing a new function instead makes more sense:

const isUserLoaded = useIsUserLoaded()

[Soviut]

@posva Great, I'm doing a quick PR for this.