Disable infinite fetch on some elements of the home

front/packages/ui/src/fetch-infinite.tsx

@@ -35,6 +35,7 @@ export const InfiniteFetchList = <Data, Props, _>({
 	Header,
 	headerProps,
 	getItemType,
+	fetchMore = true,
 	...props
 }: {
 	query: ReturnType<typeof useInfiniteFetch<_, Data>>;
@@ -51,6 +52,7 @@ export const InfiniteFetchList = <Data, Props, _>({
 	Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement;
 	headerProps?: Props;
 	getItemType?: (item: Data, index: number) => string | number;
+	fetchMore?: boolean;
 }): JSX.Element | null => {
 	const { numColumns, size } = useBreakpointMap(layout);
 	const oldItems = useRef<Data[] | undefined>();
@@ -79,7 +81,7 @@ export const InfiniteFetchList = <Data, Props, _>({
 			keyExtractor={(item: any) => item.id?.toString()}
 			numColumns={numColumns}
 			estimatedItemSize={size}
-			onEndReached={fetchNextPage}
+			onEndReached={fetchMore ? fetchNextPage : undefined}
 			onEndReachedThreshold={0.5}
 			onRefresh={refetch}
 			refreshing={isRefetching}

front/packages/ui/src/fetch-infinite.web.tsx

@@ -42,6 +42,7 @@ const InfiniteScroll = <Props,>({
 	isFetching,
 	Header,
 	headerProps,
+	fetchMore = true,
 	...props
 }: {
 	children?: ReactElement | (ReactElement | null)[] | null;
@@ -52,12 +53,13 @@ const InfiniteScroll = <Props,>({
 	isFetching: boolean;
 	Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement;
 	headerProps?: Props;
+	fetchMore?: boolean;
 } & Stylable) => {
 	const ref = useRef<HTMLDivElement>(null);
 	const { css } = useYoshiki();
 
 	const onScroll = useCallback(() => {
-		if (!ref.current || !hasMore || isFetching) return;
+		if (!ref.current || !hasMore || isFetching || !fetchMore) return;
 		const scroll =
 			layout.layout === "horizontal"
 				? ref.current.scrollWidth - ref.current.scrollLeft
@@ -66,7 +68,7 @@ const InfiniteScroll = <Props,>({
 			layout.layout === "horizontal" ? ref.current.offsetWidth : ref.current.offsetHeight;
 
 		if (scroll <= offset * 1.2) loadMore();
-	}, [hasMore, isFetching, layout, loadMore]);
+	}, [hasMore, isFetching, layout, loadMore, fetchMore]);
 	const scrollProps = { ref, onScroll };
 
 	// Automatically trigger a scroll check on start and after a fetch end in case the user is already
@@ -158,6 +160,7 @@ export const InfiniteFetchList = <Data, _, HeaderProps>({
 	Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement;
 	headerProps: HeaderProps;
 	getItemType?: (item: Data, index: number) => string | number;
+	fetchMore?: boolean;
 }): JSX.Element | null => {
 	const oldItems = useRef<Data[] | undefined>();
 	const { items, error, fetchNextPage, hasNextPage, isFetching } = query;

front/packages/ui/src/home/recommanded.tsx

@@ -166,6 +166,7 @@ export const Recommanded = () => {
 			<InfiniteFetch
 				query={Recommanded.query()}
 				layout={ItemDetails.layout}
+				fetchMore={false}
 				{...css({ padding: 0 })}
 			>
 				{(x, i) => (

front/packages/ui/src/home/vertical.tsx

@@ -37,6 +37,7 @@ export const VerticalRecommanded = () => {
 			<InfiniteFetch
 				query={VerticalRecommanded.query()}
 				layout={{ ...ItemList.layout, layout: "vertical" }}
+				fetchMore={false}
 			>
 				{(x, i) => (
 					<ItemList