diff --git a/front/packages/ui/src/fetch-infinite.tsx b/front/packages/ui/src/fetch-infinite.tsx index e80128e7..24d51630 100644 --- a/front/packages/ui/src/fetch-infinite.tsx +++ b/front/packages/ui/src/fetch-infinite.tsx @@ -30,6 +30,7 @@ const emulateGap = ( gap: number, numColumns: number, index: number, + itemsCount: number ): ViewStyle => { let marginLeft = 0; let marginRight = 0; @@ -49,6 +50,7 @@ const emulateGap = ( marginLeft, marginRight, marginTop: layout !== "horizontal" && index >= numColumns ? gap : 0, + marginBottom: layout !== "horizontal" && itemsCount - index <= numColumns ? gap : 0, }; }; @@ -105,6 +107,7 @@ export const InfiniteFetchList = ( const placeholders = [...Array(count === 0 ? numColumns : count)].map( (_, i) => ({ id: `gen${i}`, isLoading: true }) as Data, ); + const data = isFetching ? [...(items || []), ...placeholders] : items; const List = nested ? (FlatList as unknown as typeof FlashList) : FlashList; @@ -119,7 +122,7 @@ export const InfiniteFetchList = ( renderItem={({ item, index }) => ( ( {children({ isLoading: false, ...item } as any, index)} )} - data={isFetching ? [...(items || []), ...placeholders] : items} + data={data} horizontal={layout.layout === "horizontal"} keyExtractor={(item: any) => item.id} numColumns={layout.layout === "horizontal" ? 1 : numColumns} diff --git a/front/packages/ui/src/fetch.tsx b/front/packages/ui/src/fetch.tsx index 5e2fb7f7..a365aa47 100644 --- a/front/packages/ui/src/fetch.tsx +++ b/front/packages/ui/src/fetch.tsx @@ -33,7 +33,7 @@ export type Layout = { }; export type WithLoading = - | (Item & { isLoading: false }) + | (Item & { isLoading?: false }) | (Partial & { isLoading: true }); const isPage = (obj: unknown): obj is Page => @@ -113,7 +113,6 @@ export const EmptyView = ({ message }: { message: string }) => {