Fix blank page issue on module route refresh
- Pre-register all module routes automatically from module definitions in router configuration - Add useModuleReady composable for clean reactive loading states during module initialization - Update ChatPage and EventsPage with proper loading/error states and computed service access - Remove duplicate route registration from plugin manager install phase - Maintain modular architecture while ensuring routes are available immediately on app startup Resolves blank pages and Vue Router warnings when refreshing on /chat, /events, /my-tickets routes. Users now see proper loading indicators instead of blank screens during module initialization. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
85635cfc96
commit
7145af3f83
5 changed files with 140 additions and 15 deletions
|
|
@ -1,9 +1,36 @@
|
|||
<template>
|
||||
<div class="h-[calc(100vh-3.5rem)] lg:h-[calc(100vh-4rem)] xl:h-[calc(100vh-5rem)] w-full">
|
||||
<!-- Loading State -->
|
||||
<div v-if="isLoading" class="flex flex-col items-center justify-center min-h-screen">
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
|
||||
<div class="text-center space-y-2">
|
||||
<h2 class="text-xl font-semibold">Loading Chat...</h2>
|
||||
<p class="text-sm text-muted-foreground">Setting up encrypted messaging and connecting to Nostr relays...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-else-if="error" class="flex flex-col items-center justify-center min-h-screen">
|
||||
<div class="text-center space-y-4">
|
||||
<h2 class="text-xl font-semibold text-red-600">Failed to load chat</h2>
|
||||
<p class="text-muted-foreground">{{ error }}</p>
|
||||
<button @click="location.reload()" class="px-4 py-2 bg-primary text-primary-foreground rounded">
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Content - Only render when module is ready -->
|
||||
<div v-else class="h-[calc(100vh-3.5rem)] lg:h-[calc(100vh-4rem)] xl:h-[calc(100vh-5rem)] w-full">
|
||||
<ChatComponent />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useModuleReady } from '@/composables/useModuleReady'
|
||||
import ChatComponent from '../components/ChatComponent.vue'
|
||||
|
||||
// Simple reactive module loading - no complex logic needed
|
||||
const { isReady, isLoading, error } = useModuleReady('chat')
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue