After.js Files

isLoading prop now gets injected to page components

isLoading prop shows that if getInitialProps is in pending state or not

:::jsx
function HomePage({ isLoading, error, data }) {
  if (isLoading) {
    return <Spinner />
  }

  if (error) {
    return <span>something went wrong</span>
  }

  return <MyComponent data={data} />
}

HomePage.getInitialProps = () => {
  try {
    const { data } = await fetchHomePage();
    return { data }
  } catch (error) {
    return { error }
  }
}

New transitionBehavior prop on <After />

:::jsx
// transitionBehavior: instant | blocked

<After transitionBehavior="instant" /> // default is `blocked`

blocked behavior (default):

navigation event occurs -> wait until getInitailProps get finished -> render the next page with injected props (I mean results of the getInitailProps)

instant behavior: navigation event occurs -> call getInitailProps -> render the next page -> re-render component when getInitailProps is finished with injected props

Minor Changes

• Feat(after): add TransitionBehavior type: [27d0c6]
• Feat(after): add logic for instant transition: [b335f4]
• Feat(after): pass transitionBehavior to render render page: [6b37ea]
• Feat(after): add isInstantTransition utility func: [30d906]
• Feat(after): clean up render method: [5a64ed]
• Feat(after): add isLoading state: [95dea9]
• Merge pull request [#348] from jaredpalmer/feature/transition-behavior: [639d34]