Squash merge market-preload into market

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, computed } from 'vue'
+import { onMounted, ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import Navbar from '@/components/layout/Navbar.vue'
 import Footer from '@/components/layout/Footer.vue'
@@ -7,11 +7,15 @@ import LoginDialog from '@/components/auth/LoginDialog.vue'
 import { Toaster } from '@/components/ui/sonner'
 import 'vue-sonner/style.css'
 import { auth } from '@/composables/useAuth'
+import { useMarketPreloader } from '@/composables/useMarketPreloader'
 import { toast } from 'vue-sonner'
 
 const route = useRoute()
 const showLoginDialog = ref(false)
 
+// Initialize market preloader
+const marketPreloader = useMarketPreloader()
+
 // Hide navbar on login page
 const showNavbar = computed(() => {
   return route.path !== '/login'
@@ -20,6 +24,9 @@ const showNavbar = computed(() => {
 function handleLoginSuccess() {
   showLoginDialog.value = false
   toast.success('Welcome back!')
+  
+  // Trigger market preloading after successful login
+  marketPreloader.preloadMarket()
 }
 
 onMounted(async () => {
@@ -30,6 +37,14 @@ onMounted(async () => {
     console.error('Failed to initialize authentication:', error)
   }
 })
+
+// Watch for authentication changes and trigger market preloading
+watch(() => auth.isAuthenticated.value, (isAuthenticated) => {
+  if (isAuthenticated && !marketPreloader.isPreloaded.value) {
+    console.log('User authenticated, triggering market preload...')
+    marketPreloader.preloadMarket()
+  }
+}, { immediate: true })
 </script>
 
 <template>

src/components/layout/Navbar.vue

@@ -12,6 +12,7 @@ import LoginDialog from '@/components/auth/LoginDialog.vue'
 import ProfileDialog from '@/components/auth/ProfileDialog.vue'
 import CurrencyDisplay from '@/components/ui/CurrencyDisplay.vue'
 import { auth } from '@/composables/useAuth'
+import { useMarketPreloader } from '@/composables/useMarketPreloader'
 
 interface NavigationItem {
   name: string
@@ -24,6 +25,7 @@ const { theme, setTheme } = useTheme()
 const isOpen = ref(false)
 const showLoginDialog = ref(false)
 const showProfileDialog = ref(false)
+const marketPreloader = useMarketPreloader()
 
 const navigation = computed<NavigationItem[]>(() => [
   { name: t('nav.home'), href: '/' },
@@ -89,6 +91,9 @@ const handleLogout = async () => {
               'text-foreground': $route.path === item.href
             }">
             {{ item.name }}
+            <!-- Market preloading indicator -->
+            <div v-if="item.href === '/market' && marketPreloader.isPreloading" 
+                 class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
           </router-link>
         </div>
       </div>
@@ -223,6 +228,9 @@ const handleLogout = async () => {
             'text-foreground': $route.path === item.href
           }" @click="isOpen = false">
           {{ item.name }}
+          <!-- Market preloading indicator -->
+          <div v-if="item.href === '/market' && marketPreloader.isPreloading" 
+               class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
         </router-link>
       </div>
     </div>

src/composables/useMarket.ts

@@ -81,6 +81,9 @@ export function useMarket() {
         // Don't fail the entire load process if subscription fails
       }
       
+      // Clear any error state since we successfully loaded the market data
+      marketStore.setError(null)
+      
     } catch (err) {
       console.error('Error loading market data:', err)
       throw err

src/composables/useMarketPreloader.ts

@@ -0,0 +1,65 @@
+import { ref, readonly } from 'vue'
+import { useMarket } from './useMarket'
+import { useMarketStore } from '@/stores/market'
+import { config } from '@/lib/config'
+
+export function useMarketPreloader() {
+  const isPreloading = ref(false)
+  const isPreloaded = ref(false)
+  const preloadError = ref<string | null>(null)
+  
+  const market = useMarket()
+  const marketStore = useMarketStore()
+  
+  const preloadMarket = async () => {
+    // Don't preload if already done or currently preloading
+    if (isPreloaded.value || isPreloading.value) {
+      return
+    }
+    
+    try {
+      isPreloading.value = true
+      preloadError.value = null
+      
+      const naddr = config.market.defaultNaddr
+      if (!naddr) {
+        console.log('No market naddr configured, skipping preload')
+        return
+      }
+      
+      console.log('Preloading market data...')
+      
+      // Connect to market
+      await market.connectToMarket()
+      
+      // Load market data
+      await market.loadMarket(naddr)
+      
+      // Clear any error state since preloading succeeded
+      marketStore.setError(null)
+      
+      isPreloaded.value = true
+      console.log('Market data preloaded successfully')
+      
+    } catch (error) {
+      console.error('Failed to preload market:', error)
+      preloadError.value = error instanceof Error ? error.message : 'Failed to preload market'
+      // Don't throw error, let the UI handle it gracefully
+    } finally {
+      isPreloading.value = false
+    }
+  }
+  
+  const resetPreload = () => {
+    isPreloaded.value = false
+    preloadError.value = null
+  }
+  
+  return {
+    isPreloading: readonly(isPreloading),
+    isPreloaded: readonly(isPreloaded),
+    preloadError: readonly(preloadError),
+    preloadMarket,
+    resetPreload
+  }
+} 

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(() => {
+  // 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(() => {