Add a loading indicator between <Link /> navigations

[arunoda]

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

So, we need to show a loading indicator between that time.
This is my suggestion.

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

const Loading = () => (<p>Loading...</p>);

export default () => (
  <div>
    /* Render all links */
    <Header onLoading={Loading}/>
    <Ready>
      <p>Hello Home Page</p>
    </Ready>
  </div>
);

If there's a link navigation request, Ready component will show the Loading component.

What do you guys think?

EDIT 2

I'm working on a new PR with just using <Link />: #250

EDIT 1

Here's the solution for this issue: #242

[sedubois]

It is indeed annoying that nothing is visible for over a second and sometimes even longer (in my case) when clicking a link. I believe zeit.co doesn't have that issue because they preload pages with a ServiceWorker (see #24 to add it to next.js), but for us poor mortals and our users, a visual feedback would be great.

[arunoda]

I hope zeit also have this. I think service workers might improve the situation but not fix it.

Anyway, I am totally blind about the service worker usage.

[tdurand]

Is there a good workaround for that in the meantime prefetch is implemented ? i just started to implement a new app with next.js and i have 1-3s wait time without any loading indicator when first loading the app different pages.

PS: just saw this PR ;-) : #238

[arunoda]

@tdurand current implementation is based on Link and it's not going to work on few cases. So, we'll add a singleton Router with hooks to identify the loading event.

Hopefully, we could do it soon.

[tdurand]

Thanks, i saw the PR for service workers and very much looking forward to this one as well, for now my app is quite unusable in its current state, i'm gonna try to hack something in the meantime to get it more responsive

[arunoda]

Just like #242 we need to provide a API from the singleton Router. It also has API for .go() and etc.