@antelopejs/dms-marketing 0.2.3 → 0.2.5

package/frontend-vue/app/components/OverviewView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, watch } from 'vue'
 import { useI18n } from '#dms/frontend-module'
+import { MS_PER_DAY } from '../constants'
 import { useChildId } from '../composables/useChildId'
 import { useLatestRequest } from '../composables/useLatestRequest'
 import {
@@ -10,7 +11,6 @@ import {
 import {
   DEFAULT_PERIOD_PRESET,
   MARKETING_PERIOD_PRESETS,
-  MS_PER_DAY,
   periodDays,
   useMarketingPeriod,
 } from '../composables/useMarketingPeriod'

package/frontend-vue/app/components/PagesView.vue

@@ -81,6 +81,7 @@ let searchTimer: ReturnType<typeof setTimeout> | null = null
 const {
   data: inventory,
   loading: loadingPages,
+  settled: pagesSettled,
   failed: pagesFailed,
   run: loadPages,
 } = useLatestRequest<MarketingPages>(() =>
@@ -100,6 +101,16 @@ const trackerEnabled = computed(() => inventory.value?.trackerEnabled ?? true)
 // attempt, and must not clear the one that says the site list never loaded.
 const failed = computed(() => websitesFailed.value || pagesFailed.value)
 
+// A selected site means an inventory request is expected. Keep the surface
+// visibly loading through the first answer instead of rendering an empty
+// master/detail shell while websites, pages and the preview requests settle.
+const loading = computed(
+  () =>
+    loadingWebsites.value
+    || loadingPages.value
+    || (!!selectedWebsiteId.value && !pagesSettled.value),
+)
+
 // Land on something rather than on an empty pane, but never override a path
 // that was linked to or typed. Watching the answer rather than writing from
 // the fetch keeps superseded ones out: only the newest ever reaches here.
@@ -334,8 +345,10 @@ async function resetSiteHeatmaps() {
     />
 
     <template v-else>
+      <USkeleton v-if="loading" class="h-96 w-full" />
+
       <UAlert
-        v-if="truncated"
+        v-else-if="truncated"
         icon="i-ph-list"
         color="neutral"
         variant="subtle"
@@ -353,7 +366,7 @@ async function resetSiteHeatmaps() {
       />
 
       <DmsMasterDetail
-        v-else
+        v-else-if="!loading"
         v-model="selectedPath"
         :items="listItems"
         :list-label="t('page.marketing.pages.inventory')"

package/frontend-vue/app/composables/useMarketingPeriod.ts

@@ -1,4 +1,5 @@
 import { computed, type ComputedRef } from 'vue'
+import { MS_PER_DAY } from '../constants'
 
 /**
  * Bridge between the DMS period selector and the marketing endpoints.
@@ -9,8 +10,6 @@ import { computed, type ComputedRef } from 'vue'
  * carry the window as a query parameter and have to map it back onto a preset.
  */
 
-export const MS_PER_DAY = 86_400_000
-
 export const DEFAULT_PERIOD_DAYS = 7
 export const DEFAULT_PERIOD = `${DEFAULT_PERIOD_DAYS}d`
 

package/frontend-vue/app/composables/useMarketingRoutes.ts

@@ -16,12 +16,15 @@ interface PagesLink {
 }
 
 /** Query without the empty keys — a bare link must stay bare. */
-function withQuery(base: string, query: Record<string, string | null | undefined>) {
-  const entries = Object.entries(query).filter(([, value]) => !!value)
-  return {
-    path: base,
-    query: Object.fromEntries(entries) as Record<string, string>,
+function withQuery(base: string, query: Record<string, string | null | undefined>): string {
+  const params = new URLSearchParams()
+  for (const [key, value] of Object.entries(query)) {
+    if (value) {
+      params.set(key, value)
+    }
   }
+  const suffix = params.toString()
+  return suffix ? `${base}?${suffix}` : base
 }
 
 /** The tracked-pages surface, optionally on a given site, path and window. */

package/frontend-vue/app/constants.ts

@@ -0,0 +1,10 @@
+/**
+ * Module-wide constants, imported explicitly.
+ *
+ * Deliberately outside `app/composables`, `app/types` and `app/utils`: the DMS
+ * frontend builder auto-imports everything those directories export into the
+ * shared namespace, where a generic name silently shadows the core's. This
+ * file is never scanned, so anything here has to be imported by hand.
+ */
+
+export const MS_PER_DAY = 86_400_000

package/frontend-vue/tests/latest-request.test.ts

@@ -0,0 +1,35 @@
+import { nextTick } from 'vue'
+import { describe, expect, it } from 'vitest'
+import { useLatestRequest } from '../app/composables/useLatestRequest'
+
+describe('useLatestRequest loading states', () => {
+  it('is unsettled immediately and settles with the fetched path inventory', async () => {
+    let resolve: ((value: { pages: { path: string }[] }) => void) | undefined
+    const request = useLatestRequest(() => new Promise((done) => {
+      resolve = done
+    }))
+
+    const pending = request.run()
+    expect(request.settled.value).toBe(false)
+    expect(request.loading.value).toBe(true)
+    expect(request.data.value).toBeNull()
+
+    resolve?.({ pages: [{ path: '/pricing' }] })
+    await pending
+    await nextTick()
+
+    expect(request.settled.value).toBe(true)
+    expect(request.loading.value).toBe(false)
+    expect(request.data.value?.pages[0]?.path).toBe('/pricing')
+  })
+
+  it('settles an empty response without leaving the empty path state loading', async () => {
+    const request = useLatestRequest(async () => ({ pages: [] }))
+
+    await request.run()
+
+    expect(request.settled.value).toBe(true)
+    expect(request.loading.value).toBe(false)
+    expect(request.data.value?.pages).toEqual([])
+  })
+})

package/frontend-vue/tests/routes.test.ts

@@ -7,25 +7,17 @@ import {
 
 describe('module links', () => {
   it('stay bare when nothing is selected', () => {
-    expect(pagesLink()).toEqual({ path: '/modules/marketing/pages', query: {} })
-    expect(campaignsLink()).toEqual({
-      path: '/modules/marketing/campaigns',
-      query: {},
-    })
-    expect(funnelsLink()).toEqual({
-      path: '/modules/marketing/funnels',
-      query: {},
-    })
+    expect(pagesLink()).toBe('/modules/marketing/pages')
+    expect(campaignsLink()).toBe('/modules/marketing/campaigns')
+    expect(funnelsLink()).toBe('/modules/marketing/funnels')
   })
 
-  it('carry only the selections that have a value', () => {
-    expect(pagesLink({ website: 'w1', path: undefined, period: '7d' })).toEqual({
-      path: '/modules/marketing/pages',
-      query: { website: 'w1', period: '7d' },
-    })
-    expect(funnelsLink({ website: 'w1', funnel: null })).toEqual({
-      path: '/modules/marketing/funnels',
-      query: { website: 'w1' },
-    })
+  it('serializes the exact button route and encodes selected values', () => {
+    expect(funnelsLink({ website: 'test-site-1' })).toBe(
+      '/modules/marketing/funnels?website=test-site-1',
+    )
+    expect(pagesLink({ website: 'w 1', path: '/pricing?x=1', period: '7d' })).toBe(
+      '/modules/marketing/pages?website=w+1&path=%2Fpricing%3Fx%3D1&period=7d',
+    )
   })
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms-marketing",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",