fix(tv): keep favorites lists mounted when all sections are empty

The all-empty screen early-returned before mounting any collection list,
so after a favorites/watchlist switch the stale all-empty state kept the
lists unmounted and onEmptyStateChange could never fire again, leaving
the screen stuck on the no-data view. Render the empty view inline with
the lists instead, matching the mobile Favorites structure.
This commit is contained in:
Gauvain
2026-07-04 18:23:07 +02:00
parent 28bf70c0ac
commit 28749fe042

View File

@@ -155,58 +155,6 @@ export const Favorites = () => {
/>
);
if (areAllEmpty()) {
return (
<View
style={{
flex: 1,
paddingTop: insets.top + TOP_PADDING,
paddingHorizontal: HORIZONTAL_PADDING,
}}
>
{tabBadges}
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
}}
>
<Image
style={{
width: 64,
height: 64,
marginBottom: 16,
tintColor: Colors.primary,
}}
contentFit='contain'
source={heart}
/>
<Text
style={{
fontSize: typography.heading,
fontWeight: "bold",
marginBottom: 8,
color: "#FFFFFF",
}}
>
{t(emptyTitleKey)}
</Text>
<Text
style={{
textAlign: "center",
opacity: 0.7,
fontSize: typography.body,
color: "#FFFFFF",
}}
>
{t(emptyTextKey)}
</Text>
</View>
</View>
);
}
return (
<ScrollView
nestedScrollEnabled
@@ -214,14 +162,59 @@ export const Favorites = () => {
contentContainerStyle={{
paddingTop: insets.top + TOP_PADDING,
paddingBottom: insets.bottom + 60,
flexGrow: 1,
}}
>
<View style={{ gap: SECTION_GAP }}>
<View style={{ gap: SECTION_GAP, flex: 1 }}>
{watchlistEnabled && (
<View style={{ paddingHorizontal: HORIZONTAL_PADDING }}>
{tabBadges}
</View>
)}
{/* Rendered alongside the lists (never instead of them) so they stay
mounted and re-report emptiness on a favorites/watchlist switch;
an early return here would freeze the all-empty state. */}
{areAllEmpty() && (
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
paddingHorizontal: HORIZONTAL_PADDING,
}}
>
<Image
style={{
width: 64,
height: 64,
marginBottom: 16,
tintColor: Colors.primary,
}}
contentFit='contain'
source={heart}
/>
<Text
style={{
fontSize: typography.heading,
fontWeight: "bold",
marginBottom: 8,
color: "#FFFFFF",
}}
>
{t(emptyTitleKey)}
</Text>
<Text
style={{
textAlign: "center",
opacity: 0.7,
fontSize: typography.body,
color: "#FFFFFF",
}}
>
{t(emptyTextKey)}
</Text>
</View>
)}
<InfiniteScrollingCollectionList
queryFn={fetchFavoriteSeries}
queryKey={["home", queryKeyBase, "series"]}