feat: ui loading update

static/components/market-config/market-config.js

@@ -8,7 +8,6 @@ async function marketConfig(path) {
         data: function () {
             return {
                 tab: 'merchants',
-                profiles: new Map(),
                 merchantPubkey: null,
                 relayUrl: null,
                 configData: {

static/js/market.js

@@ -78,7 +78,6 @@ const market = async () => {
         filterCategories: [],
         groupByStall: false,
 
-        drawer: true,
         relays: new Set(),
         events: [],
         stalls: [],
@@ -87,6 +86,7 @@ const market = async () => {
 
         bannerImage: null,
         logoImage: null,
+        isLoading: false,
 
 
         profiles: new Map(),
@@ -191,9 +191,6 @@ const market = async () => {
           this.products.find(p => p.id == this.activeProduct)?.name || 'Product'
         )
       },
-      isLoading() {
-        return this.$q.loading.isActive
-      },
       hasExtension() {
         return window.nostr
       },
@@ -238,10 +235,10 @@ const market = async () => {
       // Get notes from Nostr
       await this.initNostr()
 
-      this.$q.loading.hide()
 
 
       await this.listenForIncommingDms(this.merchants.map(m => ({ publicKey: m.publicKey, since: this.lastDmForPubkey(m.publicKey) })))
+      this.isLoading = false
     },
     methods: {
       async handleQueryParams(params) {
@@ -414,7 +411,7 @@ const market = async () => {
           .filter(f => f)
       },
       async initNostr() {
-        this.$q.loading.show()
+        this.isLoading = true
         const pool = new NostrTools.SimplePool()
 
         let relays = Array.from(this.relays)
@@ -432,10 +429,10 @@ const market = async () => {
             await this.updateData(events)
           })
 
-        this.$q.loading.hide()
+
         this.pool = pool
         this.poolSubscribe()
-        return
+        this.isLoading = false
       },
       async poolSubscribe() {
         const authors = this.merchants.map(m => m.publicKey)
@@ -908,6 +905,7 @@ const market = async () => {
         event.id = NostrTools.getEventHash(event)
         try {
           event.sig = await NostrTools.signEvent(event, this.account.privkey)
+
           const pub = this.pool.publish(Array.from(this.relays), event)
           pub.on('ok', () => {
             console.debug(`Config event was sent`)

templates/nostrmarket/market.html

@@ -69,6 +69,10 @@
       <div class="col-lg-2 col-md-1 col-sm-0"></div>
     </div>
 
+    <div v-if="isLoading" class="row q-mb-sm">
+      <div class="col-12 text-center"> <q-spinner-dots color="primary" size="xl" /></div>
+    </div>
+
     <div class="row q-mb-sm">
       <div class="col-lg-2 col-md-1 col-sm-0"></div>
       <div class="col-lg-8 col-md-10 col-sm-12 auto-width">
@@ -87,6 +91,7 @@
     <div class="row q-mb-sm">
       <div class="col-lg-2 col-md-1 col-sm-0"></div>
       <div class="col-lg-7 col-md-9 col-sm-12 auto-width">
+
         <q-breadcrumbs class="cursor q-mt-sm q-mr-sm">
           <q-breadcrumbs-el :label="config?.opts?.name || 'Market'" icon="home" @click="navigateTo('market')"
             class="cursor-pointer auto-width">