Fix infinite scroll behavior of details page

front/packages/ui/src/details/header.tsx

@@ -169,14 +169,16 @@ const TitleLine = ({
 							})}
 							{...tooltip(t("show.play"))}
 						/>
-						{trailerUrl && <IconButton
+						{trailerUrl && (
+							<IconButton
 								icon={Theaters}
 								as={Link}
 								href={trailerUrl}
 								target="_blank"
 								color={{ xs: theme.user.contrast, md: theme.colors.white }}
 								{...tooltip(t("show.trailer"))}
-						/>}
+							/>
+						)}
 					</View>
 				</View>
 			</View>
@@ -249,7 +251,7 @@ const Description = ({
 				{t("show.genre")}:{" "}
 				{(isLoading ? [...Array(3)] : genres!).map((genre, i) => (
 					<Fragment key={genre?.slug ?? i.toString()}>
-						<P>{i !== 0 && ", "}</P>
+						<P {...css({ m: 0 })}>{i !== 0 && ", "}</P>
 						{isLoading ? (
 							<Skeleton {...css({ width: rem(5) })} />
 						) : (

front/packages/ui/src/details/season.tsx

@@ -41,7 +41,7 @@ export const EpisodeList = ({
 	return (
 		<InfiniteFetch
 			query={EpisodeList.query(slug, season)}
-			placeholderCount={15}
+			placeholderCount={10}
 			layout={EpisodeLine.layout}
 			empty={t("show.episode-none")}
 			divider

front/packages/ui/src/details/show.tsx

@@ -26,6 +26,7 @@ import { EpisodeList } from "./season";
 import { Header } from "./header";
 import Svg, { Path, SvgProps } from "react-native-svg";
 import { Container, SwitchVariant } from "@kyoo/primitives";
+import { forwardRef } from "react";
 
 const SvgWave = (props: SvgProps) => {
 	const { css } = useYoshiki();
@@ -52,8 +53,10 @@ const query = (slug: string): QueryIdentifier<Show> => ({
 export const ShowDetails: QueryPage<{ slug: string; season: string }> = ({ slug, season }) => {
 	const { css, theme } = useYoshiki();
 
-	const ShowHeader = ({ children, ...props }: ViewProps) => (
+	const ShowHeader = forwardRef<View, ViewProps>(function _ShowHeader({ children, ...props }, ref) {
+		return (
 			<View
+				ref={ref}
 				{...css(
 					[
 						{ bg: (theme) => theme.background },
@@ -84,6 +87,7 @@ export const ShowDetails: QueryPage<{ slug: string; season: string }> = ({ slug,
 				</View>
 			</View>
 		);
+	});
 
 	return (
 		<SwitchVariant>

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

@@ -20,7 +20,7 @@
 
 import { Page, QueryIdentifier, useInfiniteFetch } from "@kyoo/models";
 import { HR } from "@kyoo/primitives";
-import { ComponentType, Fragment, ReactElement, useMemo, useRef } from "react";
+import { ComponentType, Fragment, isValidElement, ReactElement, useMemo, useRef } from "react";
 import { Stylable, useYoshiki } from "yoshiki";
 import { EmptyView, ErrorView, Layout, WithLoading } from "./fetch";
 
@@ -31,6 +31,7 @@ const InfiniteScroll = ({
 	loadMore,
 	hasMore = true,
 	isFetching,
+	Header,
 	...props
 }: {
 	children?: ReactElement | (ReactElement | null)[] | null;
@@ -39,14 +40,12 @@ const InfiniteScroll = ({
 	loadMore: () => void;
 	hasMore: boolean;
 	isFetching: boolean;
+	Header: ComponentType<{ children: JSX.Element }> | ReactElement | undefined;
 } & Stylable) => {
 	const ref = useRef<HTMLDivElement>(null);
 	const { css } = useYoshiki();
 
-	return (
+	const onScroll = () => {
-		<div
-			ref={ref}
-			onScroll={() => {
 		if (!ref.current || !hasMore || isFetching) return;
 		const scroll =
 			layout === "horizontal"
@@ -55,7 +54,11 @@ const InfiniteScroll = ({
 		const offset = layout === "horizontal" ? ref.current.offsetWidth : ref.current.offsetHeight;
 
 		if (scroll <= offset * 1.2) loadMore();
-			}}
+	};
+	const scrollProps = { ref, onScroll };
+
+	const list = (props: object) => (
+		<div
 			{...css(
 				[
 					{
@@ -84,6 +87,15 @@ const InfiniteScroll = ({
 			{hasMore && isFetching && loader}
 		</div>
 	);
+
+	if (!Header) return list({ ...scrollProps, ...props });
+	if (!isValidElement(Header)) return <Header {...scrollProps}>{list(props)}</Header>;
+	return (
+		<>
+			{Header}
+			{list({ ...scrollProps, ...props })}
+		</>
+	);
 };
 
 export const InfiniteFetch = <Data,>({
@@ -125,7 +137,7 @@ export const InfiniteFetch = <Data,>({
 		return <EmptyView message={empty} />;
 	}
 
-	const list = (
+	return (
 		<InfiniteScroll
 			layout={grid ? "grid" : horizontal ? "horizontal" : "vertical"}
 			loadMore={fetchNextPage}
@@ -137,6 +149,7 @@ export const InfiniteFetch = <Data,>({
 					{children({ isLoading: true } as any, i)}
 				</Fragment>
 			))}
+			Header={Header}
 			{...props}
 		>
 			{items?.map((item, i) => (
@@ -147,7 +160,6 @@ export const InfiniteFetch = <Data,>({
 			))}
 		</InfiniteScroll>
 	);
-	return addHeader(Header, list);
 };
 
 const addHeader = (