diff --git a/front/packages/ui/src/fetch-infinite.tsx b/front/packages/ui/src/fetch-infinite.tsx index ae2e7809..f2978fac 100644 --- a/front/packages/ui/src/fetch-infinite.tsx +++ b/front/packages/ui/src/fetch-infinite.tsx @@ -35,6 +35,7 @@ export const InfiniteFetchList = ({ Header, headerProps, getItemType, + fetchMore = true, ...props }: { query: ReturnType>; @@ -51,6 +52,7 @@ export const InfiniteFetchList = ({ Header?: ComponentType | ReactElement; headerProps?: Props; getItemType?: (item: Data, index: number) => string | number; + fetchMore?: boolean; }): JSX.Element | null => { const { numColumns, size } = useBreakpointMap(layout); const oldItems = useRef(); @@ -79,7 +81,7 @@ export const InfiniteFetchList = ({ keyExtractor={(item: any) => item.id?.toString()} numColumns={numColumns} estimatedItemSize={size} - onEndReached={fetchNextPage} + onEndReached={fetchMore ? fetchNextPage : undefined} onEndReachedThreshold={0.5} onRefresh={refetch} refreshing={isRefetching} diff --git a/front/packages/ui/src/fetch-infinite.web.tsx b/front/packages/ui/src/fetch-infinite.web.tsx index 9e7ee2c5..a0b0aab1 100644 --- a/front/packages/ui/src/fetch-infinite.web.tsx +++ b/front/packages/ui/src/fetch-infinite.web.tsx @@ -42,6 +42,7 @@ const InfiniteScroll = ({ isFetching, Header, headerProps, + fetchMore = true, ...props }: { children?: ReactElement | (ReactElement | null)[] | null; @@ -52,12 +53,13 @@ const InfiniteScroll = ({ isFetching: boolean; Header?: ComponentType | ReactElement; headerProps?: Props; + fetchMore?: boolean; } & Stylable) => { const ref = useRef(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 = ({ 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 = ({ Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement; headerProps: HeaderProps; getItemType?: (item: Data, index: number) => string | number; + fetchMore?: boolean; }): JSX.Element | null => { const oldItems = useRef(); const { items, error, fetchNextPage, hasNextPage, isFetching } = query; diff --git a/front/packages/ui/src/home/recommanded.tsx b/front/packages/ui/src/home/recommanded.tsx index 80a60293..00e68c8e 100644 --- a/front/packages/ui/src/home/recommanded.tsx +++ b/front/packages/ui/src/home/recommanded.tsx @@ -166,6 +166,7 @@ export const Recommanded = () => { {(x, i) => ( diff --git a/front/packages/ui/src/home/vertical.tsx b/front/packages/ui/src/home/vertical.tsx index 5255622a..bb711836 100644 --- a/front/packages/ui/src/home/vertical.tsx +++ b/front/packages/ui/src/home/vertical.tsx @@ -37,6 +37,7 @@ export const VerticalRecommanded = () => { {(x, i) => (