diff --git a/front/packages/ui/src/fetch-infinite.web.tsx b/front/packages/ui/src/fetch-infinite.web.tsx index 5212b9ca..b4882b10 100644 --- a/front/packages/ui/src/fetch-infinite.web.tsx +++ b/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, isValidElement, ReactElement, useRef } from "react"; +import { ComponentType, Fragment, isValidElement, ReactElement, useEffect, useRef } from "react"; import { Stylable, useYoshiki } from "yoshiki"; import { EmptyView, ErrorView, Layout, WithLoading } from "./fetch"; @@ -47,6 +47,12 @@ const InfiniteScroll = ({ const ref = useRef(null); const { css } = useYoshiki(); + // Automatically trigger a scroll check on start and after a fetch end in case the user is already + // at the bottom of the page or if there is no scroll bar (ultrawide or something like that) + useEffect(() => { + onScroll(); + }, [isFetching]); + const onScroll = () => { if (!ref.current || !hasMore || isFetching) return; const scroll =