loading spinner keeps loading forever React

Question

I've got a problem with my loader spinner. It keeps loading forever, even though i declared it's time to 2s in the fetch, but nothing happens. Here's my code:

import Loading from './Loading';

const ItemDetailContainer = () => {
    const [arrayList, setArrayList] = useState({});
    const [loading, SetLoading] = useState(false);
  
    useEffect(() => {
      SetLoading(true);
      customFetch(2000, products[0])
        .then((result) => setArrayList(result))
        .catch((err) => console.log(err));
    }, []);
  
    return (
      <div>
        {loading ? <Loading/> : <ItemDetail products={arrayList}/>}
      </div>
    );
  };

Answer 1

You SetLoading(true) when the component mounts but when customFetch returns you never SetLoading(false) back to false.

useEffect(() => {
  SetLoading(true);
  customFetch(2000, products[0])
    .then((result) => setArrayList(result))
    .catch((err) => console.log(err))
    .finally(() => SetLoading(false));
}, []);