Add Ready component to handle loading across pages.

[arunoda]

Fixes #238

Basically this allows us to show a loading screen when switching between pages.
Here's how to use this:

import React from 'react';
import Ready from 'next/ready';
import Header from '../components/header.js';

const Loading = () => (<p>It's coming...</p>);

export default () => (
  <div>
    <Header />
    <Ready loadingHandler={Loading}>
      <p>Hello Next!</p>
    </Ready>
  </div>
);

[mattapperson]

It would be great if this assisted in animations between pages too...

[rauchg]

From the original issue:

When we click on a link it might take a time to load. I just peek through the code and it seems to do two async ops mainly:
Fetch the code
Fetch data

Keep in mind that the "fetch the data" part is optional. One can go ahead and do:

getInitialProps ({ req }) {
  if (req) {
    // get data now
  } else {
    // get data on `componentDidMount`
  }
})

I agree that there might be "Loading" wants to do while we wait on that. But I wonder if it could be handled better with something like:

<Link href="/test" onClick={ () => this.setState({ loading: true }) }>
  <a>Let's go to another page</a>
</Link>

[rauchg]

In other words, maybe we have to make <Link> more powerful by adding more events (currently it doesn't have onClick even)

[arunoda]

Okay. Basically, you mean loading stuff is out of the scope of Next.
I get your point with doing something with doing something similar with <Link />

Let' say we have a lot of Links elements on the page. Then we have to add hooks for many links.

Practically, I'd like to add this loading capability into a layout in my app.
So, it's better to control this from a central API.

May be we could expose a Router instance and emit these events.

[mattapperson]

@arunoda in that instance couldn't you just create a new component that just wraps <Link>?

[rauchg]

@arunoda the problem of adding hooks to many links is very trivially solved:

import Link from './my-link'
export default () => (
  <p>Hi there, my fancy <Link><a>here</a></Link></p>
)

this link could do a lot of interesting things that are shared across pages. Not least of which is showing a spinner or Medium-style bar for transitions between pages:

https://twitter.com/rauchg/status/797577535370317825

for which I would love to have an example on the wiki.

[rauchg]

I suspect that creating that example would force us to design the proper hooks on <Link>

[arunoda]

Okay guys, yep. I got the way we need to this via <Link />.

In order to do that, I hope we need one last feature for Link (or a way to to get it from somewhere else in a nice way).
That's a way to know the page switching has been completed.

We can do it by hooking into the History API, or React components. But adding good API with links makes sense a lot.

Here's an suggestion:

const startLoading = () => console.log("Start Loading");
const stopLoading = () => console.log("Stop Loading");

<Link onClick={startLoading} onStop={stopLoading}/>

[arunoda]

Guys, I think we could close this PR.
I'm working on this new PR: #250

[shurvirmori]

Hey someone help me, here...
How to import
import Ready from 'next/ready'

it's showing error

[timneutkens]

As you can see you're commenting on a closed pull-request, not a merged one. So this proposal was never added to Next.js.

You're probably looking for https://github.com/zeit/next.js#3-with-no-ssr