Почему мое приложение React не отдает простой текст «загрузки», который подключен к состоянию? ⇐ Javascript

[Anonymous]

my homepage.jsx выглядит так:

Код: Выделить всё

import {
Box,
Container,
SimpleGrid,
Text,
useColorModeValue,
VStack,
} from "@chakra-ui/react";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { useProductStore } from "../store/product.js";
import ProductCard from "../components/ProductCard.jsx";

const HomePage = () => {
const { fetchProducts, products } = useProductStore();
const [isLoading, setIsLoading] = useState(true);
const color = useColorModeValue("blue.800", "gray.100");
useEffect(() => {
const fetchProductsAsync = async () => {
setIsLoading(true);
// Add a small delay to ensure loading state is visible
setTimeout(async () => {
await fetchProducts();
setIsLoading(false);
}, 500);
};
fetchProductsAsync();
}, [fetchProducts]);

return (

{isLoading ? (

Loading products...


Loading...




) : (


Current Products



{products.map((product) => (

))}


{products.length === 0 && !isLoading &&  (

No products found 😓{" "}


Create a product{" "}



)}

)}

);
};

export default HomePage;

< /code>
FetchProducts поступает от моего менеджера по штату Zustand, который выглядит следующим образом: < /p>
export const useProductStore = create((set) => ({
products: [],
setProducts: (products) => set({ products }),
fetchProducts: async () =>  {
try {
const res = await fetch("/api/products");
const data = await res.json();
set({ products: data.data });
return data;
} catch (e) {
console.log("Error fetching products-frontend", e.message);
}
}
< /code>
Когда я запускаю свое приложение, в течение секунды, пока мои продукты не загружаются, я вижу текст «Нет продуктов», а не текст «загрузка». Где это идет не так?export const getProducts = async (req, res) => {
try {
const products = await Product.find({});
res.status(200).json({ success: true, data: products });
} catch (e) {
console.log("Error in fetching products-backend", e.message);
res.status(500).json({ success: false, message: "Server Error" });
}
};
< /code>
Я пытался поместить «загрузку» в состояние и пытаться контролировать, но безрезультатно. Также попробовал с условиями с условиями в блоке кода снова не работает, и я удалил весь модный код загрузки и попытался заменить его просто простой тег H1 

«Загрузка», и он все еще не будет отображаться, вместо этого он отображает «не найдено продуктов» на долю секунды до загрузки моих продуктов.

Подробнее здесь: https://stackoverflow.com/questions/797 ... ed-to-a-st