fix: prevent fetching on deactivated state

Author: vis97c

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

@@ -30,6 +30,8 @@
 		type FunctionalComponent,
 		type DefineComponent,
 		computed,
+		onActivated,
+		onDeactivated,
 	} from "vue";
 	import _ from "lodash";
 
@@ -87,13 +89,18 @@
 	const fetchedContent = ref<T>();
 	const firstLoad = ref(false);
 	const hydrated = ref(false);
+	/**
+	 * Whether component was deactivated by keep-alive
+	 */
+	const deactivated = ref(false);
 	/**
 	 * Hydrate content
 	 *
 	 * Useful with firebase client approach
 	 */
 	const hydrate: tHydrate<T> = (newContent, newErrors) => {
 		// prevent hydration
+		if (deactivated.value) return;
 		if (fetchedContent.value && !hydrated.value) return (hydrated.value = true);
 		if (!props.preventAutoload && !firstLoad.value) return;
 
@@ -107,6 +114,9 @@
 	}
 
 	async function refresh() {
+		// prevent refresh
+		if (deactivated.value) return;
+
 		try {
 			if (props.promise || props.hydratablePromise || props.url) {
 				loading.value = true;
@@ -150,7 +160,21 @@
 	// Allow the parent to manually force an update
 	emit("refresh", refresh);
 
-	// refetch on url or promise change
+	function validatePromiseLike(newPromise: any, oldPromise: any) {
+		/**
+		 * The same promise would trigger the watcher
+		 * We assume here that the same promise is provided
+		 */
+		const possibleSamePromise = !!newPromise && !!oldPromise;
+
+		// prevent muntiple requests
+		if (newPromise === oldPromise || !!possibleSamePromise) return;
+
+		// refresh
+		if (!loading.value && !!newPromise) refresh();
+	}
+
+	// lifecycle, refetch on url or promise change
 	watch(
 		() => props.url,
 		(newUrl, oldUrl) => {
@@ -162,37 +186,29 @@
 		},
 		{ immediate: false }
 	);
-	watch(
-		() => props.promise,
-		(newPromise, oldPromise) => {
-			/**
-			 * The same promise would trigger the watcher
-			 * We assume here that the same promise is provided
-			 */
-			const possibleSamePromise = !!newPromise && !!oldPromise;
-
-			// prevent muntiple requests
-			if (newPromise === oldPromise || !!possibleSamePromise) return;
-
-			// refresh
-			if (!loading.value && !!newPromise) refresh();
-		},
-		{ immediate: false }
-	);
-	// load if the firstLoad was prevented
+	watch(() => props.promise, validatePromiseLike, { immediate: false });
+	watch(() => props.hydratablePromise, validatePromiseLike, { immediate: false });
 	watch(
 		() => props.preventAutoload,
 		(prevent) => {
+			// load if the firstLoad was prevented
 			if (!prevent && !firstLoad.value) refresh();
 		},
 		{ immediate: false }
 	);
-	// Refresh if payload changes
 	watch(
 		() => props.payload,
 		(newPayload, oldPayload) => {
+			// Refresh if payload changes
 			if (firstLoad.value && !_.isEqual(newPayload, oldPayload)) refresh();
 		},
 		{ immediate: false }
 	);
+
+	onActivated(() => {
+		deactivated.value = false;
+	});
+	onDeactivated(() => {
+		deactivated.value = true;
+	});
 </script>