From 957f3e38901ee55fd1f38b344f8529b55a653b00 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sat, 27 Sep 2025 14:20:46 +0200
Subject: [PATCH] fix: improve loading state handling in MarketPage and add
 debug methods

- Updated the LoadingErrorState component to correctly reflect error states based on market readiness.
- Enhanced the isMarketReady computed property to account for loading and error conditions more accurately.
- Introduced temporary debug methods for simulating loading and error states, aiding in testing and development.
- Made debug methods globally accessible for easier testing of loading states.

These changes enhance the reliability of the loading/error handling in the MarketPage component and facilitate better debugging during development.
---
 src/modules/market/views/MarketPage.vue | 60 ++++++++++++++++++++++++-
 1 file changed, 58 insertions(+), 2 deletions(-)

diff --git a/src/modules/market/views/MarketPage.vue b/src/modules/market/views/MarketPage.vue
index 12381fd..95b1d36 100644
--- a/src/modules/market/views/MarketPage.vue
+++ b/src/modules/market/views/MarketPage.vue
@@ -3,7 +3,7 @@
     <LoadingErrorState
       :is-loading="!isMarketReady && ((marketStore.isLoading ?? false) || marketPreloader.isPreloading.value)"
       :loading-message="marketPreloader.isPreloading.value ? 'Preloading market...' : 'Loading market...'"
-      :has-error="!!(marketStore.error || marketPreloader.preloadError.value) && marketStore.products.length === 0"
+      :has-error="!!(marketStore.error || marketPreloader.preloadError.value) && !isMarketReady"
       error-title="Failed to load market"
       :error-message="marketStore.error || marketPreloader.preloadError.value || ''"
       @retry="retryLoadMarket"
@@ -151,8 +151,13 @@ const needsToLoadMarket = computed(() => {
 // Check if market data is ready (either preloaded or loaded)
 const isMarketReady = computed(() => {
   const isLoading = marketStore.isLoading ?? false
+  const hasError = !!(marketStore.error || marketPreloader.preloadError.value)
+
+  // Market is ready if:
+  // 1. Successfully preloaded, OR
+  // 2. Has products, not loading, and no current errors
   const ready = marketPreloader.isPreloaded.value ||
-         (marketStore.products.length > 0 && !isLoading)
+         (marketStore.products.length > 0 && !isLoading && !hasError)
 
   return ready
 })
@@ -240,6 +245,57 @@ const handleCategoryFilter = (category: string) => {
   toggleCategory(category)
 }
 
+// DEBUG: Temporary methods to test loading states (will be removed)
+const simulateLoading = () => {
+  console.log('🔄 Simulating loading state...')
+  marketStore.setError(null)
+  marketStore.setLoading(true)
+  marketPreloader.resetPreload()
+
+  setTimeout(() => {
+    console.log('✅ Simulating successful load')
+    marketStore.setLoading(false)
+    retryLoadMarket()
+  }, 3000)
+}
+
+const simulateError = () => {
+  console.log('❌ Simulating error state...')
+  marketStore.setLoading(false)
+  marketStore.setError('Simulated error for testing')
+  marketPreloader.resetPreload()
+}
+
+const debugLoadingState = () => {
+  const isLoading = marketStore.isLoading ?? false
+  const hasError = !!(marketStore.error || marketPreloader.preloadError.value)
+
+  console.log('🔍 Loading State Debug:', {
+    isMarketReady: isMarketReady.value,
+    'marketStore.isLoading': marketStore.isLoading,
+    'marketStore.error': marketStore.error,
+    'marketStore.products.length': marketStore.products.length,
+    'marketPreloader.isPreloading': marketPreloader.isPreloading.value,
+    'marketPreloader.preloadError': marketPreloader.preloadError.value,
+    'marketPreloader.isPreloaded': marketPreloader.isPreloaded.value,
+    hasError,
+    '--- UI State ---': '---',
+    'LoadingErrorState.isLoading': !isMarketReady.value && (isLoading || marketPreloader.isPreloading.value),
+    'LoadingErrorState.hasError': hasError && !isMarketReady.value,
+    'ShowMarketContent': isMarketReady.value
+  })
+}
+
+// Make debug methods available globally for testing
+if (typeof window !== 'undefined') {
+  ;(window as any).debugMarketLoading = {
+    simulateLoading,
+    simulateError,
+    debugLoadingState,
+    retryLoadMarket
+  }
+}
+
 onMounted(() => {
   // Only load market if it hasn't been preloaded
   if (needsToLoadMarket.value) {