perf(food): implement deferred value updates

Author: Robert27

src/app/(screens)/food-preferences.tsx

@@ -10,6 +10,7 @@ import { useFoodFilterStore } from '@/hooks/useFoodFilterStore'
 import type { FormListSections } from '@/types/components'
 import { useRouter } from 'expo-router'
 import type React from 'react'
+import { startTransition } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ScrollView, Text, View } from 'react-native'
 import { createStyleSheet, useStyles } from 'react-native-unistyles'
@@ -59,6 +60,24 @@ export default function FoodPreferences(): React.JSX.Element {
 		(state) => state.toggleFoodLanguage
 	)
 
+	const handleToggleRestaurant = (name: string) => {
+		startTransition(() => {
+			toggleSelectedRestaurant(name)
+		})
+	}
+
+	const handleSetShowStatic = (value: boolean) => {
+		startTransition(() => {
+			setShowStatic(value)
+		})
+	}
+
+	const handleToggleLanguage = (language: string) => {
+		startTransition(() => {
+			toggleFoodLanguage(language)
+		})
+	}
+
 	const sections: FormListSections[] = [
 		{
 			header: 'Labels',
@@ -86,14 +105,14 @@ export default function FoodPreferences(): React.JSX.Element {
 					<MultiSectionPicker
 						elements={elemtents}
 						selectedItems={selectedRestaurants}
-						action={toggleSelectedRestaurant}
+						action={handleToggleRestaurant}
 					/>
 				</SectionView>
 				<SectionView title={'Filter'}>
 					<SingleSectionPicker
 						title={t('preferences.formlist.static')}
 						selectedItem={showStatic ?? false}
-						action={setShowStatic}
+						action={handleSetShowStatic}
 						state={false}
 					/>
 				</SectionView>
@@ -104,7 +123,7 @@ export default function FoodPreferences(): React.JSX.Element {
 					<MultiSectionRadio
 						elements={languages}
 						selectedItem={foodLanguage}
-						action={toggleFoodLanguage}
+						action={handleToggleLanguage}
 					/>
 				</SectionView>
 			</View>

src/components/Food/FoodScreen.tsx

@@ -12,7 +12,14 @@ import { pausedToast } from '@/utils/ui-utils'
 import { useQuery } from '@tanstack/react-query'
 import * as Haptics from 'expo-haptics'
 import type React from 'react'
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import {
+	memo,
+	useCallback,
+	useDeferredValue,
+	useEffect,
+	useRef,
+	useState
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import {
 	Animated,
@@ -39,6 +46,11 @@ function FoodScreen(): React.JSX.Element {
 		(state) => state.allergenSelection
 	)
 
+	// Use deferredValue for filtering states to prevent UI blocking during expensive updates
+	const deferredSelectedRestaurants = useDeferredValue(selectedRestaurants)
+	const deferredShowStatic = useDeferredValue(showStatic)
+	const deferredAllergenSelection = useDeferredValue(allergenSelection)
+
 	const [data, setData] = useState<Food[]>([])
 	const { t, i18n } = useTranslation('common')
 	const {
@@ -50,8 +62,9 @@ function FoodScreen(): React.JSX.Element {
 		isSuccess,
 		refetch
 	} = useQuery({
-		queryKey: ['meals', selectedRestaurants, showStatic],
-		queryFn: async () => await loadFoodEntries(selectedRestaurants, showStatic),
+		queryKey: ['meals', deferredSelectedRestaurants, deferredShowStatic],
+		queryFn: async () =>
+			await loadFoodEntries(deferredSelectedRestaurants, deferredShowStatic),
 		staleTime: 1000 * 60 * 0, // 10 minutes
 		gcTime: 1000 * 60 * 60 * 24 // 24 hours
 	})
@@ -162,7 +175,8 @@ function FoodScreen(): React.JSX.Element {
 	const screenHeight = Dimensions.get('window').height
 	const scrollY = new Animated.Value(0)
 	const showAllergensBanner =
-		allergenSelection.length === 1 && allergenSelection[0] === 'not-configured'
+		deferredAllergenSelection.length === 1 &&
+		deferredAllergenSelection[0] === 'not-configured'
 
 	return (
 		<SafeAreaProvider>

src/components/Food/MealEntry.tsx

@@ -24,7 +24,7 @@ import Color from 'color'
 import { LinearGradient } from 'expo-linear-gradient'
 import { router } from 'expo-router'
 import type React from 'react'
-import { memo, useContext, useMemo, useState } from 'react'
+import { memo, useContext, useDeferredValue, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 import { createStyleSheet, useStyles } from 'react-native-unistyles'
@@ -44,27 +44,33 @@ export const MealEntry = memo(
 			(state) => state.allergenSelection
 		)
 		const foodLanguage = useFoodFilterStore((state) => state.foodLanguage)
+
+		// Use deferredValue for filter properties to prevent UI blocking
+		const deferredPreferences = useDeferredValue(preferencesSelection)
+		const deferredAllergens = useDeferredValue(allergenSelection)
+		const deferredFoodLanguage = useDeferredValue(foodLanguage)
+
 		const { t, i18n } = useTranslation('food')
 		const { styles, theme } = useStyles(stylesheet)
 		const userAllergens = useMemo(
 			() =>
 				convertRelevantAllergens(
 					meal.allergens ?? [],
-					allergenSelection,
+					deferredAllergens,
 					i18n.language
 				),
-			[meal.allergens, allergenSelection, i18n.language]
+			[meal.allergens, deferredAllergens, i18n.language]
 		)
 		const { userKind = USER_GUEST } =
 			useContext<UserKindContextType>(UserKindContext)
 		const userFlags = useMemo(
 			() =>
 				convertRelevantFlags(
 					meal.flags ?? [],
-					preferencesSelection,
+					deferredPreferences,
 					i18n.language
 				),
-			[meal.flags, preferencesSelection, i18n.language]
+			[meal.flags, deferredPreferences, i18n.language]
 		)
 		const setSelectedMeal = useRouteParamsStore(
 			(state) => state.setSelectedMeal
@@ -74,10 +80,10 @@ export const MealEntry = memo(
 			price !== '' ? getUserSpecificLabel(userKind ?? 'guest', t) : ''
 
 		const isNotConfigured =
-			allergenSelection.length === 1 &&
-			allergenSelection[0] === 'not-configured'
+			deferredAllergens.length === 1 &&
+			deferredAllergens[0] === 'not-configured'
 		const hasSelectedAllergens =
-			allergenSelection.length > 0 && !isNotConfigured
+			deferredAllergens.length > 0 && !isNotConfigured
 		const hasUserAllergens = userAllergens.length > 0 && !isNotConfigured
 		const hasNoMealAllergens = hasSelectedAllergens && meal.allergens === null
 
@@ -157,7 +163,7 @@ export const MealEntry = memo(
 								<Text style={styles.title} numberOfLines={2}>
 									{mealName(
 										meal.name,
-										foodLanguage,
+										deferredFoodLanguage,
 										i18n.language as LanguageKey
 									)}
 								</Text>