Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Add an example with page loading indicator #250

Closed
wants to merge 6 commits into from
+178 −3
Closed

[WIP] Add an example with page loading indicator #250

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0997b7e
Add onStart and onComplete events to the Link
arunoda Nov 14, 2016
4be9607
Add an example for indication page loading.
arunoda Nov 14, 2016
b4e3fd5
Change header.js in Header.
arunoda Nov 14, 2016
db6f328
Fix a typo in the comment.
arunoda Nov 14, 2016
20b284f
Add a README.md for the with-loading example.
arunoda Nov 15, 2016
aef0557
Make the example self containing.
arunoda Nov 19, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions examples/with-loading/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react'
import Head from 'next/head'
import MyLink from './MyLink'

export default () => (
<div style={{ marginBottom: 20 }}>
<Head>
{/* Import CSS for nprogress */}
<link rel='stylesheet' type='text/css' href='http://ricostacruz.com/nprogress/nprogress.css' />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe make a copy of this into /static instead? Since this is http and we don't want to spam his site

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay. Makes sense.

</Head>

<MyLink href='/'>
Home
</MyLink> |
<MyLink href='/about'>
About
</MyLink>
</div>
)
11 changes: 11 additions & 0 deletions examples/with-loading/components/MyLink.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react'
import Link from 'next/link'
import NProgress from 'nprogress'

export default (props) => (
<Link
{...props}
onStart={() => NProgress.start()}
onComplete={() => NProgress.done()}
/>
)
13 changes: 13 additions & 0 deletions examples/with-loading/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"name": "with-loading",
"version": "0.0.0",
"description": "",
"scripts": {
"dev": "../../dist/bin/next"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This requires a top-level npm install, which is not clarified in the instructions. I think it's best if we include maybe "next": "*" in the deps?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay that makes sense. I will right another script to play with current source code.

},
"author": "",
"license": "ISC",
"dependencies": {
"nprogress": "^0.2.0"
}
}
20 changes: 20 additions & 0 deletions examples/with-loading/pages/about.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React, { Component } from 'react'
import Header from '../components/Header'

export default class About extends Component {
// Add some delay
static getInitialProps () {
return new Promise((resolve) => {
setTimeout(resolve, 500)
})
}

render () {
return (
<div>
<Header />
<p>This is about Next!</p>
</div>
)
}
}
9 changes: 9 additions & 0 deletions examples/with-loading/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react'
import Header from '../components/Header'

export default () => (
<div>
<Header />
<p>Hello Next!</p>
</div>
)
13 changes: 10 additions & 3 deletions lib/link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,22 @@ export default class Link extends Component {

e.preventDefault()

// getting navigation event props.
const {
onStart = () => null,
onComplete = () => null,
onError = () => null
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 I didn't know this is possible

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ha ha. ES6 is pretty mysterious.

Copy link
Contributor Author

@arunoda arunoda Nov 14, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can do this also:

onStart: theNewNameForOnStart = () => null

} = this.props

// straight up redirect
onStart()
this.context.router.push(null, href)
.then((success) => {
onComplete(success)
if (!success) return
if (scroll !== false) window.scrollTo(0, 0)
})
.catch((err) => {
if (this.props.onError) this.props.onError(err)
})
.catch(onError)
}

render () {
Expand Down