monacousa-portal/pages/index.vue

<template>
  <div class="loading-container">
    <v-container fluid class="fill-height">
      <v-row justify="center" align="center">
        <v-col cols="auto" class="text-center">
          <v-progress-circular 
            indeterminate 
            color="primary" 
            size="64"
            width="6"
          />
          <p class="mt-4 text-h6">Loading...</p>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script setup lang="ts">
// NO top-level navigation - this causes SSR issues and loops!
// Let middleware and lifecycle hooks handle routing properly

onMounted(() => {
  const { isAuthenticated } = useAuth();
  
  // Route after component is mounted (client-side only)
  if (isAuthenticated.value) {
    navigateTo('/dashboard');
  } else {
    navigateTo('/login');
  }
});
</script>

<style scoped>
.loading-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>