Squash merge market-preload into market

src/pages/Market.vue

@@ -1,18 +1,20 @@
 <template>
   <div class="container mx-auto px-4 py-8">
     <!-- Loading State -->
-    <div v-if="marketStore.isLoading" class="flex justify-center items-center min-h-64">
+    <div v-if="!isMarketReady && ((marketStore.isLoading ?? false) || marketPreloader.isPreloading)" class="flex justify-center items-center min-h-64">
       <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>
-        <p class="text-gray-600">Loading market...</p>
+        <p class="text-gray-600">
+          {{ marketPreloader.isPreloading ? 'Preloading market...' : 'Loading market...' }}
+        </p>
       </div>
     </div>
 
     <!-- Error State -->
-    <div v-else-if="marketStore.error" class="flex justify-center items-center min-h-64">
+    <div v-else-if="(marketStore.error || marketPreloader.preloadError) && marketStore.products.length === 0" class="flex justify-center items-center min-h-64">
       <div class="text-center">
         <h2 class="text-2xl font-bold text-red-600 mb-4">Failed to load market</h2>
-        <p class="text-gray-600 mb-4">{{ marketStore.error }}</p>
+        <p class="text-gray-600 mb-4">{{ marketStore.error || marketPreloader.preloadError }}</p>
         <Button @click="retryLoadMarket" variant="outline">
           Try Again
         </Button>
@@ -66,13 +68,13 @@
       </div>
 
       <!-- No Products State -->
-      <div v-if="marketStore.filteredProducts.length === 0 && !marketStore.isLoading" class="text-center py-12">
+      <div v-if="isMarketReady && marketStore.filteredProducts.length === 0 && !(marketStore.isLoading ?? false)" class="text-center py-12">
         <h3 class="text-xl font-semibold text-gray-600 mb-2">No products found</h3>
         <p class="text-gray-500">Try adjusting your search or filters</p>
       </div>
 
       <!-- Product Grid -->
-      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+      <div v-if="isMarketReady && marketStore.filteredProducts.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
         <ProductCard
           v-for="product in marketStore.filteredProducts"
           :key="product.id"
@@ -94,9 +96,10 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted, computed } from 'vue'
 import { useMarketStore } from '@/stores/market'
 import { useMarket } from '@/composables/useMarket'
+import { useMarketPreloader } from '@/composables/useMarketPreloader'
 import { config } from '@/lib/config'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -107,9 +110,36 @@ import ProductCard from '@/components/market/ProductCard.vue'
 
 const marketStore = useMarketStore()
 const market = useMarket()
+const marketPreloader = useMarketPreloader()
 
 let unsubscribe: (() => void) | null = null
 
+// Check if we need to load market data
+const needsToLoadMarket = computed(() => {
+  return !marketPreloader.isPreloaded.value && 
+         !marketPreloader.isPreloading.value && 
+         marketStore.products.length === 0
+})
+
+// Check if market data is ready (either preloaded or loaded)
+const isMarketReady = computed(() => {
+  const isLoading = marketStore.isLoading.value ?? false
+  const ready = marketPreloader.isPreloaded.value || 
+         (marketStore.products.length > 0 && !isLoading)
+  
+  // Debug logging
+  console.log('Market ready check:', {
+    isPreloaded: marketPreloader.isPreloaded.value,
+    productsLength: marketStore.products.length,
+    isLoading: isLoading,
+    isReady: ready,
+    error: marketStore.error,
+    preloadError: marketPreloader.preloadError
+  })
+  
+  return ready
+})
+
 const loadMarket = async () => {
   try {
     const naddr = config.market.defaultNaddr
@@ -136,6 +166,7 @@ const loadMarket = async () => {
 
 const retryLoadMarket = () => {
   marketStore.setError(null)
+  marketPreloader.resetPreload()
   loadMarket()
 }
 
@@ -154,7 +185,17 @@ const viewCart = () => {
 }
 
 onMounted(() => {
-  loadMarket()
+  // Only load market if it hasn't been preloaded
+  if (needsToLoadMarket.value) {
+    console.log('Market not preloaded, loading now...')
+    loadMarket()
+  } else if (marketPreloader.isPreloaded.value) {
+    console.log('Market was preloaded, subscribing to updates...')
+    // Subscribe to real-time updates if market was preloaded
+    unsubscribe = market.subscribeToMarketUpdates()
+  } else {
+    console.log('Market data is ready, no additional loading needed')
+  }
 })
 
 onUnmounted(() => {