From 4dc0d6a97c72111d8d7ef23a2f5b850e985283d3 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Mon, 11 Sep 2023 10:52:30 +0200 Subject: [PATCH] Fix ultrawide infinite scroll --- front/packages/ui/src/fetch-infinite.web.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) 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 =