Transition Behavior

isLoading prop now gets injected to page components

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

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 />

// 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: 27d0c64
• Feat(after): add logic for instant transition: b335f4c
• Feat(after): pass transitionBehavior to render render page: 6b37ea9
• Feat(after): add isInstantTransition utility func: 30d906f
• Feat(after): clean up render method: 5a64ed4
• Feat(after): add isLoading state: 95dea98
• Merge pull request #348 from jaredpalmer/feature/transition-behavior: 639d344