- 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>
40 lines
No EOL
1.1 KiB
TypeScript
40 lines
No EOL
1.1 KiB
TypeScript
import { ref, onMounted } from 'vue'
|
|
|
|
/**
|
|
* Simple composable to handle module loading and readiness
|
|
* Uses Vue's reactivity system - no polling, no complex logic
|
|
*/
|
|
export function useModuleReady(moduleName: string) {
|
|
const isReady = ref(false)
|
|
const isLoading = ref(true)
|
|
const error = ref<string | null>(null)
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
// Dynamic import to avoid circular dependencies
|
|
const { pluginManager } = await import('@/core/plugin-manager')
|
|
|
|
// Install module if not already installed
|
|
if (!pluginManager.isInstalled(moduleName)) {
|
|
console.log(`🔄 Installing ${moduleName} module...`)
|
|
await pluginManager.install(moduleName)
|
|
}
|
|
|
|
// Module is ready - Vue reactivity handles the rest
|
|
isReady.value = true
|
|
console.log(`✅ ${moduleName} module ready`)
|
|
|
|
} catch (err) {
|
|
console.error(`❌ Failed to load ${moduleName} module:`, err)
|
|
error.value = err instanceof Error ? err.message : 'Failed to load module'
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
})
|
|
|
|
return {
|
|
isReady,
|
|
isLoading,
|
|
error
|
|
}
|
|
} |