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

Rework loader in infinite lists

Browse Source
This commit is contained in:
Zoe Roux 2024-05-20 17:52:55 +02:00
parent 9061b2e8d9
commit 9f8b2da76e
No known key found for this signature in database
2 changed files with 12 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,7 +65,8 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
query,
placeholderCount = 2,
incremental = false,
children,
Render,
Loader,
layout,
empty,
divider = false,
@ -82,10 +83,8 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
placeholderCount?: number;
layout: Layout;
horizontal?: boolean;
children: (
item: Data extends Page<infer Item> ? WithLoading<Item> : WithLoading<Data>,
i: number,
) => ReactElement | null;
Render: (props: { item: Data; index: number }) => ReactElement | null;
Loader: (props: { index: number }) => ReactElement | null;
empty?: string | JSX.Element;
incremental?: boolean;
divider?: boolean | ComponentType;
@ -111,9 +110,7 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
if (incremental) items ??= oldItems.current;
const count = items ? numColumns - (items.length % numColumns) : placeholderCount;
const placeholders = [...Array(count === 0 ? numColumns : count)].map(
(_, i) => ({ id: `gen${i}`, isLoading: true }) as Data,
);
const placeholders = [...Array(count === 0 ? numColumns : count)].fill(null);
const data = isFetching || !items ? [...(items || []), ...placeholders] : items;
const List = nested ? (FlatList as unknown as typeof FlashList) : FlashList;
@ -137,7 +134,7 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
},
]}
>
{children({ isLoading: false, ...item } as any, index)}
{item ? <Render index={index} item={item} /> : <Loader index={index} />}
</View>
)}
data={data}

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

@ -145,7 +145,7 @@ export const InfiniteFetchList = <Data, _, HeaderProps, Kind extends number | st
query,
incremental = false,
placeholderCount = 2,
children,
Render,
layout,
empty,
divider: Divider = false,
@ -154,16 +154,15 @@ export const InfiniteFetchList = <Data, _, HeaderProps, Kind extends number | st
getItemType,
getItemSize,
nested,
Loader,
...props
}: {
query: ReturnType<typeof useInfiniteFetch<_, Data>>;
incremental?: boolean;
placeholderCount?: number;
layout: Layout;
children: (
item: Data extends Page<infer Item> ? WithLoading<Item> : WithLoading<Data>,
i: number,
) => ReactElement | null;
Render: (props: { item: Data; index: number }) => ReactElement | null;
Loader: (props: { index: number }) => ReactElement | null;
empty?: string | JSX.Element;
divider?: boolean | ComponentType;
Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement;
@ -193,7 +192,7 @@ export const InfiniteFetchList = <Data, _, HeaderProps, Kind extends number | st
loader={[...Array(placeholderCount)].map((_, i) => (
<Fragment key={i.toString()}>
{Divider && i !== 0 && (Divider === true ? <HR /> : <Divider />)}
{children({ isLoading: true } as any, i)}
<Loader index={i} />
</Fragment>
))}
Header={Header}
@ -203,7 +202,7 @@ export const InfiniteFetchList = <Data, _, HeaderProps, Kind extends number | st
{(items ?? oldItems.current)?.map((item, i) => (
<Fragment key={(item as any).id}>
{Divider && i !== 0 && (Divider === true ? <HR /> : <Divider />)}
{children({ ...item, isLoading: false } as any, i)}
<Render item={item} index={i} />
</Fragment>
))}
</InfiniteScroll>