<template>
  <div>
    <NuxtLayout>
      <div v-if="!initialized" class="loading-overlay">
        <p>Loading session...</p>
      </div>
      <NuxtPage v-else />
    </NuxtLayout>
  </div>
</template>

<script setup>
const { initialized, fetchMe } = useAuth();

// Fetch the user state on initial client-side load.
// The middleware will wait for `initialized` to be true.
onMounted(() => {
  fetchMe();
});
</script>

<style>
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f4f4f5;
}

.loading-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 1.5em;
  color: #555;
}
</style>
