From b4281188d43b0590a3e18890ceebbf0fc079af4b Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 10 Jan 2024 14:26:20 +0100
Subject: [PATCH] Fix initial placeholders on mobile lists

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

diff --git a/front/packages/ui/src/fetch-infinite.tsx b/front/packages/ui/src/fetch-infinite.tsx
index 24d51630..7e007e64 100644
--- a/front/packages/ui/src/fetch-infinite.tsx
+++ b/front/packages/ui/src/fetch-infinite.tsx
@@ -30,7 +30,7 @@ const emulateGap = (
 	gap: number,
 	numColumns: number,
 	index: number,
-	itemsCount: number
+	itemsCount: number,
 ): ViewStyle => {
 	let marginLeft = 0;
 	let marginRight = 0;
@@ -107,7 +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 data = isFetching || !items ? [...(items || []), ...placeholders] : items;
 
 	const List = nested ? (FlatList as unknown as typeof FlashList) : FlashList;
 
@@ -122,7 +122,7 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
 			renderItem={({ item, index }) => (
 				<View
 					style={[
-						emulateGap(layout.layout, gap, numColumns, index, data?.length ?? 0),
+						emulateGap(layout.layout, gap, numColumns, index, data.length),
 						layout.layout === "horizontal" && {
 							width:
 								size * (getItemType && getItemSize ? getItemSize(getItemType(item, index)) : 1),
diff --git a/front/packages/ui/src/fetch.tsx b/front/packages/ui/src/fetch.tsx
index a365aa47..f2b56af6 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> =>