fix: page transition played when switching collection after soft navigation

inertia/components/dashboard/collection/list/collection_list.tsx

@@ -1,7 +1,10 @@
+import { router } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
 import { Box, ScrollArea, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import CollectionItem from '~/components/dashboard/collection/item/collection_item';
 import useShortcut from '~/hooks/use_shortcut';
+import { appendCollectionId } from '~/lib/navigation';
 import { useActiveCollection, useCollections } from '~/stores/collection_store';
 import styles from './collection_list.module.css';
 
@@ -10,13 +13,18 @@ export default function CollectionList() {
 	const { collections } = useCollections();
 	const { activeCollection, setActiveCollection } = useActiveCollection();
 
+	const replaceUrl = (collectionId: number) =>
+		router.get(appendCollectionId(route('dashboard').path, collectionId));
+
 	const goToPreviousCollection = () => {
 		const currentCategoryIndex = collections.findIndex(
 			({ id }) => id === activeCollection?.id
 		);
 		if (currentCategoryIndex === -1 || currentCategoryIndex === 0) return;
 
-		setActiveCollection(collections[currentCategoryIndex - 1]);
+		const collection = collections[currentCategoryIndex - 1];
+		replaceUrl(collection.id);
+		setActiveCollection(collection);
 	};
 
 	const goToNextCollection = () => {
@@ -29,7 +37,9 @@ export default function CollectionList() {
 		)
 			return;
 
-		setActiveCollection(collections[currentCategoryIndex + 1]);
+		const collection = collections[currentCategoryIndex + 1];
+		replaceUrl(collection.id);
+		setActiveCollection(collection);
 	};
 
 	useShortcut('ARROW_UP', goToPreviousCollection);

inertia/layouts/_base_layout.tsx

@@ -33,18 +33,23 @@ export default function BaseLayout({ children }: { children: ReactNode }) {
 		const currentLocation = new URL(window.location.href);
 		flipClass(TRANSITION_IN_CLASS, TRANSITION_OUT_CLASS);
 
-		router.on(
+		const removeStartEventListener = router.on(
 			'start',
 			(event) =>
 				canTransition(currentLocation, event.detail.visit.url) &&
 				flipClass(TRANSITION_OUT_CLASS, TRANSITION_IN_CLASS)
 		);
-		router.on(
+		const removefinishEventListener = router.on(
 			'finish',
 			(event) =>
 				canTransition(currentLocation, event.detail.visit.url) &&
 				flipClass(TRANSITION_IN_CLASS, TRANSITION_OUT_CLASS)
 		);
+
+		return () => {
+			removeStartEventListener();
+			removefinishEventListener();
+		};
 	}, []);
 
 	return (