Showing Circular indeterminate Progress on button click - reactjs

Question

I have a button that when clicked runs some code that imports data from another website. What would be nice is to have a Circular indeterminate indicator (Material UI) that shows the import is in progress, until completion.
My code below shows the code I am running and some of the jsx.
<Box mt={5} mb={5} width={1200}>
<Grid
container
justify="center"
spacing={2}
style={{ padding: '25px' }}
>
<Grid item xs={7}>
<Typography variant="h3" style={{ fontWeight: 600 }}>
List
</Typography>
<Typography variant="h5" style={{ marginTop: '2em' }}>
some text
</Typography>
<Button
variant="contained"
color="primary"
size="large"
style={{ marginTop: '1em' }}
// style={{ maxWidth: '108px', minWidth: '108px' }}
onClick={() => {
let arrCollection = [];
const stream = fetch(
'https://othersite.org/api/games/user/neio',
{ headers: { Accept: 'application/x-ndjson' } }
);
const onMessage = obj => {
arrCollection.push(obj);
};
const onComplete = () =>
console.log('The stream has completed');
stream.then(readStream(onMessage)).then(onComplete);
console.log('arrCollection', arrCollection);
}}
>
Import Games
</Button>
</Grid>
</Grid>
</Box>
What I can't work out is how to display the "circular indeterminate" while importing and then show it completed.
This is the link to the circular indeterminate code: https://material-ui.com/components/progress/
Do I need to add a node to the Dom or something?

Answer 1

As mentioned already, you can use state to manage this.
Something like this should work
const [loading, setLoading] = useState(false);
<div>{loading ? <LoadingIndicator /> : ''}</div>
<Button
onClick={() => {
setLoading(true);
let arrCollection = [];
const stream = fetch('https://othersite.org/api/games/user/neio', {
headers: { Accept: 'application/x-ndjson' },
});
const onMessage = (obj) => {
arrCollection.push(obj);
};
const onComplete = () => console.log('The stream has completed');
stream.then(readStream(onMessage)).then(onComplete);
console.log('arrCollection', arrCollection);
setLoading(false);
}}
>
Import Games
</Button>