Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-03 05:34:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix ultrawide infinite scroll

Browse Source
This commit is contained in:
Zoe Roux 2023-09-11 10:52:30 +02:00
parent 34e4036f66
commit 4dc0d6a97c
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
front/packages/ui/src/fetch-infinite.web.tsx
View File

@ -20,7 +20,7 @@
import { Page, QueryIdentifier, useInfiniteFetch } from "@kyoo/models"; import { Page, QueryIdentifier, useInfiniteFetch } from "@kyoo/models";
import { HR } from "@kyoo/primitives"; 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 { Stylable, useYoshiki } from "yoshiki";
import { EmptyView, ErrorView, Layout, WithLoading } from "./fetch"; import { EmptyView, ErrorView, Layout, WithLoading } from "./fetch";
@ -47,6 +47,12 @@ const InfiniteScroll = <Props,>({
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const { css } = useYoshiki(); 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 = () => { const onScroll = () => {
if (!ref.current || !hasMore || isFetching) return; if (!ref.current || !hasMore || isFetching) return;
const scroll = const scroll =