sosokker/chefhai
1
0
Fork 0
mirror of https://github.com/Sosokker/chefhai.git synced 2025-12-19 14:04:08 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

add loading ui

Browse Source
This commit is contained in:
Sosokker 2025-05-11 03:08:37 +07:00
parent 6933392271
commit 8644c5dc5b
1 changed files with 77 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/(tabs)/home.tsx
View File

@ -61,6 +61,11 @@ const navigateToFoodDetail = (foodId: string) => {
router.push({ pathname: "/recipe-detail", params: { id: foodId } }); router.push({ pathname: "/recipe-detail", params: { id: foodId } });
}; };
export default function HomeScreen() {
const [imageProcessing, setImageProcessing] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const { data: foodsData = [], isLoading, error } = useFoodsQuery();
const handleImageSelection = async ( const handleImageSelection = async (
pickerFn: pickerFn:
| typeof ImagePicker.launchCameraAsync | typeof ImagePicker.launchCameraAsync
@ -74,6 +79,7 @@ const handleImageSelection = async (
}); });
if (!result.canceled) { if (!result.canceled) {
setImageProcessing(true);
try { try {
const { data, error } = await supabase.auth.getUser(); const { data, error } = await supabase.auth.getUser();
if (error || !data?.user?.id) throw new Error("Cannot get user id"); if (error || !data?.user?.id) throw new Error("Cannot get user id");
@ -84,6 +90,8 @@ const handleImageSelection = async (
"Image Processing Failed", "Image Processing Failed",
(err as Error).message || "Unknown error" (err as Error).message || "Unknown error"
); );
} finally {
setImageProcessing(false);
} }
router.push({ router.push({
pathname: "/recipe-detail", pathname: "/recipe-detail",
@ -95,10 +103,6 @@ const handleImageSelection = async (
} }
}; };
export default function HomeScreen() {
const [searchQuery, setSearchQuery] = useState("");
const { data: foodsData = [], isLoading, error } = useFoodsQuery();
const filteredFoods = useMemo(() => { const filteredFoods = useMemo(() => {
return searchQuery return searchQuery
? foodsData.filter((food) => ? foodsData.filter((food) =>
@ -110,6 +114,45 @@ export default function HomeScreen() {
return ( return (
<SafeAreaView className="flex-1 bg-white"> <SafeAreaView className="flex-1 bg-white">
<StatusBar barStyle="dark-content" /> <StatusBar barStyle="dark-content" />
{imageProcessing && (
<View
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(255,255,255,0.7)",
zIndex: 9999,
justifyContent: "center",
alignItems: "center",
}}
>
<View
style={{
backgroundColor: "#fff",
padding: 24,
borderRadius: 16,
alignItems: "center",
}}
>
<Text
style={{ fontSize: 18, fontWeight: "bold", marginBottom: 12 }}
>
Processing image...
</Text>
<View style={{ marginBottom: 8 }}>
<FontAwesome
name="spinner"
size={36}
color="#ffd60a"
style={{}}
/>
</View>
<Text style={{ color: "#888" }}>Please wait</Text>
</View>
</View>
)}
<View className="flex-row justify-between items-center px-6 pt-4 pb-2"> <View className="flex-row justify-between items-center px-6 pt-4 pb-2">
<Text className="text-3xl font-bold">Hi! Mr. Chef</Text> <Text className="text-3xl font-bold">Hi! Mr. Chef</Text>