fix: Improve loading state management in useMarket and Market.vue

- Update useMarket composable to set loading state in marketStore during market loading.
- Refine loading condition in Market.vue to only check marketStore.isLoading, enhancing clarity and performance.
This commit is contained in:
padreug 2025-08-02 17:53:26 +02:00
parent e66d976ee8
commit 1a3510becb
2 changed files with 3 additions and 1 deletions

View file

@ -24,6 +24,7 @@ export function useMarket() {
const loadMarket = async (naddr: string) => { const loadMarket = async (naddr: string) => {
try { try {
isLoading.value = true isLoading.value = true
marketStore.setLoading(true)
error.value = null error.value = null
console.log('Loading market with naddr:', naddr) console.log('Loading market with naddr:', naddr)
@ -45,6 +46,7 @@ export function useMarket() {
// Don't throw error, let the UI handle it gracefully // Don't throw error, let the UI handle it gracefully
} finally { } finally {
isLoading.value = false isLoading.value = false
marketStore.setLoading(false)
} }
} }

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="container mx-auto px-4 py-8"> <div class="container mx-auto px-4 py-8">
<!-- Loading State --> <!-- Loading State -->
<div v-if="marketStore.isLoading || market.isLoading" class="flex justify-center items-center min-h-64"> <div v-if="marketStore.isLoading" class="flex justify-center items-center min-h-64">
<div class="flex flex-col items-center space-y-4"> <div class="flex flex-col items-center space-y-4">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div> <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
<p class="text-gray-600">Loading market...</p> <p class="text-gray-600">Loading market...</p>