@paris-ias/list 1.3.4 → 1.3.5

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@paris-ias/list",
   "configKey": "list",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/list/atoms/SearchString.vue

@@ -155,7 +155,6 @@
 <script setup>
 import { useNuxtApp, ref, computed } from "#imports"
 import { useDisplay } from "vuetify"
-import { useRootStore } from "../../../stores/root"
 
 const { $stores } = useNuxtApp()
 const props = defineProps({
@@ -166,34 +165,16 @@ const props = defineProps({
 })
 const feminine = ref(["news", "publications", "people"].includes(props.type))
 const { smAndDown: isSmAndDown } = useDisplay()
-const rootStore = useRootStore()
 
-const isLoading = computed(() =>
+// The skeleton must track the loading state ONLY. A previous extra clause
+// (`isZeroTotal && (isAnySearchActive || itemsCount > 0)`) was permanently true
+// after any search that returned zero results — so a completed empty search
+// (e.g. "posten") stayed pinned in skeleton mode instead of showing the
+// "0 items found searching for X" message, which is exactly the v-else branch
+// below and the correct thing to render in that case.
+const showSkeleton = computed(() =>
   Boolean($stores[props.type] && $stores[props.type].loading),
 )
-const isTypeSearchActive = computed(() => {
-  const s = $stores[props.type]?.search
-  return Boolean(s && s.length)
-})
-const isGlobalSearchActive = computed(
-  () => typeof rootStore.search === "string" && rootStore.search.length > 0,
-)
-const isAnySearchActive = computed(
-  () => isTypeSearchActive.value || isGlobalSearchActive.value,
-)
-const isZeroTotal = computed(
-  () => Number($stores[props.type]?.total || 0) === 0,
-)
-const itemsCount = computed(() =>
-  Array.isArray($stores[props.type]?.items)
-    ? $stores[props.type]?.items?.length || 0
-    : 0,
-)
-const showSkeleton = computed(
-  () =>
-    isLoading.value ||
-    (isZeroTotal.value && (isAnySearchActive.value || itemsCount.value > 0)),
-)
 </script>
 
 <style lang="scss" scoped></style>

package/dist/runtime/components/list/organisms/List.vue

@@ -54,8 +54,6 @@ import {
   useNuxtApp,
   resolveComponent,
   computed,
-  onUpdated,
-  onMounted,
   watch,
   onBeforeUnmount,
   nextTick,
@@ -168,6 +166,22 @@ if (data.value) {
   rootStore.applyListResult(props.type, data.value)
 }
 
+// Keep the store `loading` flag in lockstep with the query's real `pending`
+// state. This is the single source of truth for every skeleton (the items view
+// and SearchString both read `$stores[type].loading`). Deriving it from
+// `pending` avoids the SSR/hydration race that previously left a search-on-load
+// (e.g. ?search=posten) pinned in skeleton mode: on a hard load the manual
+// `onMounted` reset and the `variables` watcher could fire in an order that
+// re-set `loading: true` and never cleared it. `pending` flips to false exactly
+// once, when the query resolves, regardless of that ordering.
+watch(
+  pending,
+  (isPending) => {
+    rootStore.setLoading(Boolean(isPending), props.type)
+  },
+  { immediate: true },
+)
+
 // Watch for route query changes to update filters
 watch(
   () => route.query,
@@ -186,13 +200,17 @@ watch(
   async (newVars, oldVars) => {
     if (newVars && JSON.stringify(newVars) !== JSON.stringify(oldVars)) {
       /*     console.log("Variables changed, refreshing query, newVars: ", newVars) */
-      rootStore.setLoading(true, props.type)
-      await refresh()
-      if (data.value) {
-        /*         console.log("Applying refreshed data to store") */
-        rootStore.applyListResult(props.type, data.value)
+      // `loading` is driven by the `pending` watch above — `refresh()` toggles
+      // `pending` for us, so we only own the refetch + applying the result here.
+      try {
+        await refresh()
+        if (data.value) {
+          /*         console.log("Applying refreshed data to store") */
+          rootStore.applyListResult(props.type, data.value)
+        }
+      } catch (e) {
+        console.error("List refresh failed: ", e)
       }
-      rootStore.setLoading(false, props.type)
     }
   },
   { deep: true },
@@ -201,21 +219,12 @@ watch(
 // Reactive items computed from the store (single source of truth)
 const items = computed(() => $stores[props.type]?.items || [])
 
-onMounted(() => {
-  // On initial mount: clear loading state
-  /*  console.log("STOP local loading from mounted") */
-  rootStore.setLoading(false, props.type)
-})
-
 onBeforeUnmount(() => {
   rootStore.resetState(props.type, locale.value)
 })
 async function onPageChange(newPage) {
   /*  console.log("onPageChange: ", newPage) */
 
-  // Set loading state first
-  rootStore.setLoading(true, props.type)
-
   // Update the page in the store
   rootStore.updatePage({
     page: newPage,

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "AGPL-3.0-only",
   "main": "./dist/module.mjs",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "name": "@paris-ias/list",
   "repository": {
     "url": "git+https://github.com/IEA-Paris/list.git",