fix: prevent hydration duplication on pagination table content

Author: vis97c

packages/components-vue/src/components/loader/ContentFetch.vue

@@ -2,7 +2,7 @@
 	<BaseErrorBoundary :theme="theme">
 		<LoaderContent
 			v-bind="{
-				content: patchedIsContent(content) && (!!fallback || firstLoad || hydrated),
+				content: patchedIsContent(content),
 				errors,
 				loading,
 				refresh,
@@ -17,7 +17,7 @@
 			:class="$attrs.class"
 		>
 			<slot
-				v-if="patchedIsContent(content) && (!!fallback || firstLoad || hydrated)"
+				v-if="patchedIsContent(content)"
 				v-bind="{ content, refresh, loading, errors }"
 			></slot>
 		</LoaderContent>
@@ -100,9 +100,9 @@
 	defineOptions({ name: "LoaderContentFetch", inheritAttrs: false });
 
 	const props = defineProps<iLoaderContentFetchProps<T, P>>();
-	const emit = defineEmits(["refresh"]);
+	const emit = defineEmits(["refresh", "has-content"]);
 
-	const { logger } = useHelpers(useUtils);
+	const { logger, isBrowser } = useHelpers(useUtils);
 	const { useFetch } = useFetchUtils();
 	const { internals } = inject<iVuePluginOptions>("xamu") || {};
 	const useAsyncData: typeof useAsyncDataFn = internals?.useAsyncData ?? useAsyncDataFn;
@@ -197,7 +197,13 @@
 
 	function patchedIsContent(c?: T | null): c is NonNullable<T> {
 		// isContent needs to run always
-		return props.isContent?.(c ?? undefined) ?? !!c;
+		const isValid = props.isContent?.(c ?? undefined) ?? !!c;
+		const wasFetched = firstLoad.value || !!props.fallback || hydrated.value;
+		const isContent = isValid && wasFetched;
+
+		if (isBrowser) emit("has-content", isContent);
+
+		return isContent;
 	}
 	function validatePromiseLike(newPromise: any, oldPromise: any) {
 		/**

packages/components-vue/src/components/pagination/Content.vue

@@ -15,6 +15,7 @@
 			client,
 		}"
 		@refresh="$emit('refresh', $event)"
+		@has-content="$emit('has-content', $event)"
 	>
 		<slot
 			v-bind="{
@@ -121,24 +122,15 @@
 	 */
 
 	defineOptions({ name: "PaginationContent", inheritAttrs: false });
+	defineEmits(["refresh", "has-content"]);
 
 	const props = withDefaults(defineProps<iPCProps<T, C, R>>(), {
 		processContent: (c: T[]) => c,
 	});
-	const emit = defineEmits(["refresh", "hasContent"]);
 
 	const { first: defaultFirst } = inject<iPluginOptions>("xamu") || {};
 	const router = getCurrentInstance()?.appContext.config.globalProperties.$router;
 
-	/**
-	 * Patched promise
-	 */
-	const patchedPromise: iGetPage<T, C> = async (v) => {
-		const transform: (r: any) => iPage<T, C> | undefined = props.transform || ((v) => v);
-		const page = await props.page(v);
-
-		return transform(page);
-	};
 	const propsPagination = ref<iPagination>({
 		orderBy: props.orderBy,
 		first: props.first ?? defaultFirst,
@@ -183,11 +175,17 @@
 		},
 	});
 
-	function isContent(c?: iPage<T, C>): boolean {
-		const hasContent = !!c?.edges?.length;
+	/**
+	 * Patched promise
+	 */
+	const patchedPromise: iGetPage<T, C> = async (v) => {
+		const transform: (r: any) => iPage<T, C> | undefined = props.transform || ((v) => v);
+		const page = await props.page(v);
 
-		emit("hasContent", hasContent);
+		return transform(page);
+	};
 
-		return hasContent;
+	function isContent(c?: iPage<T, C>): boolean {
+		return !!c?.edges?.length;
 	}
 </script>

packages/components-vue/src/components/pagination/ContentTable.vue

@@ -32,7 +32,7 @@
 						},
 					}"
 				>
-					<template v-if="$slots.headActions" #headActions>
+					<template v-if="hasContent && $slots.headActions" #headActions>
 						<div class="flx --flxRow --flx-start-center --gap-10 --gap:md">
 							<slot name="headActions" v-bind="{ hasContent, refreshData }"></slot>
 						</div>
@@ -105,7 +105,7 @@
 		mapNode: (node: T) => node as unknown as TM,
 	});
 
-	const hasContent = ref(false);
+	const hasContent = ref(true);
 	const emittedRefresh = ref();
 
 	function refreshData() {

packages/components-vue/src/types/plugin.ts

@@ -9,7 +9,15 @@ export type vComponent<P extends Record<string, any> = Record<string, any>> =
 	| DefineComponent<P>;
 
 export interface iVuePluginOptions extends iPluginOptions<vComponent> {
+	/**
+	 * Override internal behavior
+	 * Useful to setup nuxt modules
+	 */
 	internals?: {
+		/**
+		 * Client only component
+		 */
+		clientOnly?: vComponent;
 		/**
 		 * Nuxt Async data
 		 */

packages/nuxt/src/runtime/plugins/config.ts

@@ -4,14 +4,14 @@ import type { iVuePluginOptions } from "@open-xamu-co/ui-components-vue/plugin";
 import type { tLogger } from "@open-xamu-co/ui-common-types";
 
 import { defineNuxtPlugin, useAppConfig, useAsyncData } from "#imports";
-import { NuxtLink, NuxtImg } from "#components";
+import { NuxtLink, NuxtImg, ClientOnly } from "#components";
 
 export default defineNuxtPlugin(({ vueApp }) => {
 	const options = useAppConfig().xamu as iVuePluginOptions;
 	const xamu: iVuePluginOptions = {
 		routerComponent: NuxtLink,
 		imageComponent: NuxtImg,
-		internals: { useAsyncData, ofetch: $fetch },
+		internals: { useAsyncData, ofetch: $fetch, clientOnly: ClientOnly },
 		// override defaults
 		...options,
 	};