单击按钮时显示圆形不确定进度

Question

我有一个按钮，单击该按钮会运行一些从另一个网站导入数据的代码。最好有一个循环不确定指示器（材料 UI），它显示导入正在进行中，直到完成。

下面的代码显示了我正在运行的代码和一些 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>

我想不通的是如何在导入时显示“循环不确定”然后显示完成。

这是循环不确定代码的链接：https://material-ui.com/components/progress/

我需要在 Dom 中添加一个节点吗？

Answer 1

如前所述，您可以使用状态来管理它。 像这样的东西应该可以工作

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>