From 1d6d27c0eeba20671ac2a943ccb8978d5763b394 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 10 Jan 2024 14:20:27 +0100
Subject: [PATCH] Fix bottom padding on infinte lists on mobile

---
 front/packages/ui/src/fetch-infinite.tsx | 7 +++++--
 front/packages/ui/src/fetch.tsx          | 3 +--
 2 files changed, 6 insertions(+), 4 deletions(-)

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 = <Data, Props, _, Kind extends number | string>(
 	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 = <Data, Props, _, Kind extends number | string>(
 			renderItem={({ item, index }) => (
 				<View
 					style={[
-						emulateGap(layout.layout, gap, numColumns, index),
+						emulateGap(layout.layout, gap, numColumns, index, data?.length ?? 0),
 						layout.layout === "horizontal" && {
 							width:
 								size * (getItemType && getItemSize ? getItemSize(getItemType(item, index)) : 1),
@@ -130,7 +133,7 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
 					{children({ isLoading: false, ...item } as any, index)}
 				</View>
 			)}
-			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> =
-	| (Item & { isLoading: false })
+	| (Item & { isLoading?: false })
 	| (Partial<Item> & { isLoading: true });
 
 const isPage = <T = unknown,>(obj: unknown): obj is Page<T> =>
@@ -113,7 +113,6 @@ export const EmptyView = ({ message }: { message: string }) => {
 		<View
 			{...css({
 				flexGrow: 1,
-				flexShrink: 1,
 				justifyContent: "center",
 				alignItems: "center",
 			})}