How to display ActivityIndicator untill all elements are mapped - reactjs

Question

I have this screen in which I want to see ActivityIndicator untill all devices are mapped (not fetched):
const MyScreen = () => {
const [devices, setDevices] = useState();
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
getDevices();
}, []);
const getDevices = async () => {
const pulledDevices = await fetchDevices();
setDevices(pulledDevices)
setIsLoading(false)
};
if (isLoading)
return (
<ActivityIndicator />
);
return (
<View >
{devices?.map((device) => {
return (
<View>
<Text>{device.name}</Text>
</View>
);
})}
</View>
);
};
Mapping these devices takes some time.
How could I implement here ActivityIndicator untill all devices are mapped.

Answer 1

I suggest you to use a bit more sophisticated async await hook to handle this.
useAsyncHook.js
const useAsync = asyncFunction => {
const [loading, setLoading] = useState(false);
const [result, setResult] = useState(null);
const [error, setError] = useState(null);
const execute = useCallback(async () => {
setLoading(true);
setResult(null);
setError(null);
try {
const response = await asyncFunction();
setResult(response);
setLoading(false);
} catch (error) {
setError(error);
setLoading(false);
}
}, [asyncFunction]);
useEffect(() => {
execute();
}, [execute]);
return { loading, result, error };
};
This is a raw use async hook that can be enhanced many way but it handles the loading state correctly in this state.
Usage:
const { loading, result, error } = useAsync(yourFunction);
if (loading) return null;
return <Component />;