diff --git a/src/pages/PointCountryInfo.tsx b/src/pages/PointCountryInfo.tsx index 1f2db37..4606c4e 100644 --- a/src/pages/PointCountryInfo.tsx +++ b/src/pages/PointCountryInfo.tsx @@ -67,6 +67,7 @@ export function PointCountryInfo() { }; const [countryInfo, setCountryInfo] = useState(); const [countryList, setCountryList] = useState(); + const [loadingList, setLoadingList] = useState(); useEffect(() => { if (!country) { @@ -81,12 +82,14 @@ export function PointCountryInfo() { }, [country]); useEffect(() => { + setLoadingList(true); fetch(`https://restcountries.com/v3.1/all`) .then((response) => response.json()) // 4. Setting *dogImage* to the image url that we received from the response above .then((data) => { setCountryList(data); - }); + }) + .then(() => setLoadingList(false)); }, []); function onClickPais(e: MouseEvent) { @@ -124,7 +127,9 @@ export function PointCountryInfo() { "no info :/" )} - {countryList && ( + {loadingList ? ( +

{"loading list..."}

+ ) : countryList ? (
    {countryList.map((country) => ( @@ -134,6 +139,8 @@ export function PointCountryInfo() { ))}
+ ) : ( +

{"Couldn't load the countries list :/"}

)} );