下一个js页面转换时的加载屏幕

我试图在Nextjs应用程序中更改路线时实现加载屏幕，例如/ home-> / about。

我当前的实现如下。我将初始加载状态设置为false，然后在componentDidMount上进行更改。我也调用Router.events.on内部功能componentDidMount路由变化开始时改变负荷状态。

_app.js在页面文件夹中

class MyApp extends App {
  constructor(props) {
    super(props);
    this.state = {
      loaded: false,
    };
  }

  componentDidMount() {
    this.setState({ loaded: true });
    Router.events.on('routeChangeStart', () => this.setState({ loaded: false }));
    Router.events.on('routeChangeComplete', () => this.setState({ loaded: true }));
  }



  render() {
    const { Component, pageProps } = this.props;

    const { loaded } = this.state;

    const visibleStyle = {
      display: '',
      transition: 'display 3s',
    };
    const inVisibleStyle = {
      display: 'none',
      transition: 'display 3s',
    };
    return (
      <Container>
        <>
          <span style={loaded ? inVisibleStyle : visibleStyle}>
            <Loader />
          </span>
          <span style={loaded ? visibleStyle : inVisibleStyle}>
            <Component {...pageProps} />
          </span>
        </>
      </Container>
    );
  }
}

这工作得很好，但是我觉得可能会有更好的解决方案，更优雅的解决方案。这是实现此加载功能的唯一简便方法吗？还是有替代方法？