Am trying to display a loading icon or text while I fetch an API and then remove it after fetching, am using typescript for react native,
below is what I have so far
useEffect(() => { const newsUrl = 'http://172.20.10.4:8000/mobile/news'; fetch(newsUrl, { method: 'GET', headers: {'Accept': 'application/json','Content-Type': 'application/json','Cache-Control': 'no-cache' } }) .then((response) => response.json()) .then((data) => { let newArr = [...data]; setProducts(newArr); // loadingText.hide() or something similar }) }, []);And below is the return part of the code
return (<Block> {/* I want to display this while loading */}<Block color={colors.card} flex={0} padding={sizes.padding}><Text>Loading News .......</Text></Block> {/* toggle products list */} {/* And display this when done loading */}<Block scroll paddingHorizontal={sizes.padding} showsVerticalScrollIndicator={false} contentContainerStyle={{paddingBottom: sizes.l}}><Block row wrap="wrap" justify="space-between" marginTop={sizes.sm}> {products?.map((product) => (<Product {...product} key={`card-${product?.id}`} /> ))}</Block></Block></Block> ); };