Погрузчик в условных операциях не отображается после навигации или создания новых вызовов API ⇐ Javascript

[Anonymous]

У меня был призыв к API для продуктов Fetch Fort LizeList и Cart, однако, поскольку оба оба имеют одинаковый пользовательский интерфейс, который я решил сделать в одностраничном компоненте, и, на первый взгляд, погрузчик показывает, но после того, как я навигационный загрузчик не показывает, а заголовок и продукт - это разные компоненты.
Погрузчик не показывает, когда я навигации, когда я не смогу получить данные. /> "use client";

import { useState, useEffect } from "react";
import { useParams } from "next/navigation";
import axios from "axios";
import Image from "next/image";
import { CircularProgress } from "@mui/material";

export default function ViewResouce() {
const { resource } = useParams();
const [isCart, setIsCart] = useState(false);
const [resourcesData, setResourcesData] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [dataFind, setDataFind] = useState(false);

useEffect(() => {
if (!resource) {
return;
}

if (resource === "cart") {
setIsCart(true);
return;
}

setIsCart(false);
}, [resource]);

useEffect(() => {
if (!resource) {
setIsLoading(false);
setDataFind(false);
setResourcesData([]);
return;
}

setIsLoading(true);
setDataFind(false);
setResourcesData([]);

const abortController = new AbortController();

async function getResource() {
try {
const res = await axios.get(
`/api/client/manage?resource=${resource}`,
{ signal: abortController.signal }
);
setResourcesData(res.data.data || []);
} catch (e) {
setResourcesData([]);
} finally {
setIsLoading(false);
setDataFind(true);
}
}

getResource();

return () => {
abortController.abort();
};
}, [resource]);

if (isLoading && !dataFind) {
return (
className="d-flex justify-content-center align-items-center"
style={{ height: "50vh" }}
>


);
}

if (dataFind && !isLoading && resourcesData.length 0 && isCart) {
return (

Your Cart Items

);
}

if (dataFind && !isLoading && resourcesData.length > 0 && !isCart) {
return (

Your Wishlist Items

);
}

return null;
}


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