Нажатие ссылки на страницу с getInitialProps не отключает текущий компонент и не показывает загрузку

Question

У меня есть Page1 со ссылкой на вторую страницу:

const Page1 = () => {
  return <Link href='Page2'><a>Page2</a></Link>
}

Когда я нажимаю на ссылку, Page1 не отключается, пока Page2.getInitialProps не получит данные полной загрузки и не вернет их.

const Page2 = ({ init }) => {
  return <div>{JSON.stringify(init)</div>
}

Page2.getInitialProps = async () => {
  const init = await fetch('smth')

  return { init }
}

Проблема для пользователя - это сбивает с толку, что после того, как он нажал кнопку Link, ничего не происходит в течение секунды или двух. Надеюсь, что для навигации на стороне клиента есть способ показать какой-либо загружаемый компонент после нажатия любой ссылки или, по крайней мере, отключить текущий компонент. Почти все мои страницы имеют getInitialProps, так что я надеюсь на какой-то общий c способ сделать это, а не ручной.

My _app. js:

function MyApp({ Component, pageProps }) {
  return (
      <ThemeContextProvider>
          <Header />
          <Component {...pageProps} />
          <Footer />
      </ThemeContextProvider>
  )
}

export default MyApp

Answer 1

Вы можете следовать этому примеру .
В основном вы можете использовать пользовательское приложение , чтобы переопределить и контролировать инициализацию страницы по умолчанию и показать анимацию загрузки