Reduce the number of placeholder

front/packages/ui/src/browse/index.tsx

@@ -73,7 +73,6 @@ export const BrowsePage: QueryPage = () => {
 	return (
 		<InfiniteFetch
 			query={query(sortKey, sortOrd)}
-			placeholderCount={15}
 			layout={LayoutComponent.layout}
 			Header={
 				<BrowseSettings

front/packages/ui/src/collection/index.tsx

@@ -145,7 +145,7 @@ export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => {
 	return (
 		<InfiniteFetch
 			query={query(slug)}
-			placeholderCount={15}
+			placeholderCount={2}
 			layout={{ ...ItemDetails.layout, numColumns: { xs: 1, md: 2 } }}
 			Header={CollectionHeader}
 			headerProps={{ slug }}

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

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

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

@@ -18,39 +18,38 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Person, PersonP, QueryIdentifier } from "@kyoo/models";
-import { useTranslation } from "react-i18next";
-import { InfiniteFetch } from "../fetch-infinite";
-import { PersonAvatar } from "./person";
+// import { Person, PersonP, QueryIdentifier } from "@kyoo/models";
+// import { useTranslation } from "react-i18next";
+// import { InfiniteFetch } from "../fetch-infinite";
+// import { PersonAvatar } from "./person";
 
-export const Staff = ({ slug }: { slug: string }) => {
-	const { t } = useTranslation();
-
-	return (
-		<InfiniteFetch
-			query={Staff.query(slug)}
-			horizontal
-			layout={{ numColumns: 1, size: PersonAvatar.width }}
-			empty={t("show.staff-none")}
-			placeholderCount={20}
-		>
-			{(item, key) => (
-				<PersonAvatar
-					key={key}
-					isLoading={item.isLoading}
-					slug={item?.slug}
-					name={item?.name}
-					role={item?.type ? `${item?.type} (${item?.role})` : item?.role}
-					poster={item?.poster}
-					// sx={{ width: { xs: "7rem", lg: "10rem" }, flexShrink: 0, px: 2 }}
-				/>
-			)}
-		</InfiniteFetch>
-	);
-};
-
-Staff.query = (slug: string): QueryIdentifier<Person> => ({
-	parser: PersonP,
-	path: ["shows", slug, "people"],
-	infinite: true,
-});
+// export const Staff = ({ slug }: { slug: string }) => {
+// 	const { t } = useTranslation();
+//
+// 	return (
+// 		<InfiniteFetch
+// 			query={Staff.query(slug)}
+// 			horizontal
+// 			layout={{ numColumns: 1, size: PersonAvatar.width }}
+// 			empty={t("show.staff-none")}
+// 		>
+// 			{(item, key) => (
+// 				<PersonAvatar
+// 					key={key}
+// 					isLoading={item.isLoading}
+// 					slug={item?.slug}
+// 					name={item?.name}
+// 					role={item?.type ? `${item?.type} (${item?.role})` : item?.role}
+// 					poster={item?.poster}
+// 					// sx={{ width: { xs: "7rem", lg: "10rem" }, flexShrink: 0, px: 2 }}
+// 				/>
+// 			)}
+// 		</InfiniteFetch>
+// 	);
+// };
+//
+// Staff.query = (slug: string): QueryIdentifier<Person> => ({
+// 	parser: PersonP,
+// 	path: ["shows", slug, "people"],
+// 	infinite: true,
+// });

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

@@ -26,7 +26,7 @@ import { EmptyView, ErrorView, Layout, WithLoading, addHeader } from "./fetch";
 
 export const InfiniteFetchList = <Data, Props, _>({
 	query,
-	placeholderCount = 15,
+	placeholderCount = 2,
 	incremental = false,
 	children,
 	layout,

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

@@ -137,7 +137,7 @@ const InfiniteScroll = <Props,>({
 export const InfiniteFetchList = <Data, _, HeaderProps>({
 	query,
 	incremental = false,
-	placeholderCount = 15,
+	placeholderCount = 2,
 	children,
 	layout,
 	empty,

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

@@ -76,7 +76,7 @@ export const GenreGrid = ({ genre }: { genre: Genre }) => {
 			<InfiniteFetchList
 				query={query}
 				layout={{ ...ItemGrid.layout, layout: "horizontal" }}
-				placeholderCount={10}
+				placeholderCount={2}
 				empty={displayEmpty.current ? t("home.none") : undefined}
 			>
 				{(x, i) => {

front/packages/ui/src/search/index.tsx

@@ -59,7 +59,6 @@ export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => {
 	return (
 		<InfiniteFetch
 			query={query(q, sortKey, sortOrd)}
-			placeholderCount={15}
 			layout={LayoutComponent.layout}
 			empty={t("search.empty")}
 			Header={