From 0997b7e385fcb863225a703bfa6b24ef6d7845cd Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Mon, 14 Nov 2016 07:18:07 +0530 Subject: [PATCH 1/6] Add onStart and onComplete events to the Link --- lib/link.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/lib/link.js b/lib/link.js index cba86bb43bd76..96c8b2d763100 100644 --- a/lib/link.js +++ b/lib/link.js @@ -26,15 +26,22 @@ export default class Link extends Component { e.preventDefault() + // getting navigation event props. + const { + onStart = () => null, + onComplete = () => null, + onError = () => 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 () { From 4be9607207853b4274e841453e6c3ddf54a0cea0 Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Mon, 14 Nov 2016 07:18:39 +0530 Subject: [PATCH 2/6] Add an example for indication page loading. --- examples/with-loading/components/Header.js | 19 +++++++++++++++++++ examples/with-loading/components/MyLink.js | 11 +++++++++++ examples/with-loading/package.json | 13 +++++++++++++ examples/with-loading/pages/about.js | 20 ++++++++++++++++++++ examples/with-loading/pages/index.js | 9 +++++++++ 5 files changed, 72 insertions(+) create mode 100644 examples/with-loading/components/Header.js create mode 100644 examples/with-loading/components/MyLink.js create mode 100644 examples/with-loading/package.json create mode 100644 examples/with-loading/pages/about.js create mode 100644 examples/with-loading/pages/index.js diff --git a/examples/with-loading/components/Header.js b/examples/with-loading/components/Header.js new file mode 100644 index 0000000000000..50bcbb52e075b --- /dev/null +++ b/examples/with-loading/components/Header.js @@ -0,0 +1,19 @@ +import React from 'react' +import Head from 'next/head' +import MyLink from './MyLink' + +export default () => ( +
+ + {/* Import CSS for nprogress */} + + + + + Home + | + + About + +
+) diff --git a/examples/with-loading/components/MyLink.js b/examples/with-loading/components/MyLink.js new file mode 100644 index 0000000000000..78422f8542b8c --- /dev/null +++ b/examples/with-loading/components/MyLink.js @@ -0,0 +1,11 @@ +import React from 'react' +import Link from 'next/link' +import NProgress from 'nprogress' + +export default (props) => ( + NProgress.start()} + onComplete={() => NProgress.done()} + /> +) diff --git a/examples/with-loading/package.json b/examples/with-loading/package.json new file mode 100644 index 0000000000000..6a235ce2500d1 --- /dev/null +++ b/examples/with-loading/package.json @@ -0,0 +1,13 @@ +{ + "name": "with-loading", + "version": "0.0.0", + "description": "", + "scripts": { + "dev": "../../dist/bin/next" + }, + "author": "", + "license": "ISC", + "dependencies": { + "nprogress": "^0.2.0" + } +} diff --git a/examples/with-loading/pages/about.js b/examples/with-loading/pages/about.js new file mode 100644 index 0000000000000..55c4a3189c58e --- /dev/null +++ b/examples/with-loading/pages/about.js @@ -0,0 +1,20 @@ +import React, { Component } from 'react' +import Header from '../components/header.js' + +export default class About extends Component { + // Add some delay to the loading page + static getInitialProps () { + return new Promise((resolve) => { + setTimeout(resolve, 500) + }) + } + + render () { + return ( +
+
+

This is about Next!

+
+ ) + } +} diff --git a/examples/with-loading/pages/index.js b/examples/with-loading/pages/index.js new file mode 100644 index 0000000000000..1865cd3570dd3 --- /dev/null +++ b/examples/with-loading/pages/index.js @@ -0,0 +1,9 @@ +import React from 'react' +import Header from '../components/header.js' + +export default () => ( +
+
+

Hello Next!

+
+) From b4e3fd52a5e0de317995286bf5a54a76870ab11f Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Mon, 14 Nov 2016 07:30:40 +0530 Subject: [PATCH 3/6] Change header.js in Header. --- examples/with-loading/pages/about.js | 2 +- examples/with-loading/pages/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/with-loading/pages/about.js b/examples/with-loading/pages/about.js index 55c4a3189c58e..74d6a3cad4bf3 100644 --- a/examples/with-loading/pages/about.js +++ b/examples/with-loading/pages/about.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import Header from '../components/header.js' +import Header from '../components/Header' export default class About extends Component { // Add some delay to the loading page diff --git a/examples/with-loading/pages/index.js b/examples/with-loading/pages/index.js index 1865cd3570dd3..e147bfe8afa2e 100644 --- a/examples/with-loading/pages/index.js +++ b/examples/with-loading/pages/index.js @@ -1,5 +1,5 @@ import React from 'react' -import Header from '../components/header.js' +import Header from '../components/Header' export default () => (
From db6f3281e508fe4d7c19f29e55ef71b1dc06e056 Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Mon, 14 Nov 2016 07:42:10 +0530 Subject: [PATCH 4/6] Fix a typo in the comment. --- examples/with-loading/pages/about.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-loading/pages/about.js b/examples/with-loading/pages/about.js index 74d6a3cad4bf3..5fd2ba798f779 100644 --- a/examples/with-loading/pages/about.js +++ b/examples/with-loading/pages/about.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' import Header from '../components/Header' export default class About extends Component { - // Add some delay to the loading page + // Add some delay static getInitialProps () { return new Promise((resolve) => { setTimeout(resolve, 500) From 20b284f59f3245a80cf98e54d714ac4bce91ac54 Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Tue, 15 Nov 2016 09:19:34 +0530 Subject: [PATCH 5/6] Add a README.md for the with-loading example. --- examples/with-loading/README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 examples/with-loading/README.md diff --git a/examples/with-loading/README.md b/examples/with-loading/README.md new file mode 100644 index 0000000000000..fcea460e5702d --- /dev/null +++ b/examples/with-loading/README.md @@ -0,0 +1,22 @@ +# Example app with page loading indicator + +This example features: + +* An app with two pages which uses a common [Header](./components/Header.js) component for navigation links. +* Customized version of [Link](./components/MyLink.js) which implements a loading indicator for client side navigations. +* Uses [nprogress](https://github.com/rstacruz/nprogress) as the loading indicator. + +## How to run it + +To run it: + +```sh +npm install +npm run dev +``` + +To deploy it, install [now](https://zeit.co/now) and run: + +```sh +now +``` From aef0557fa03c82d6813b3cbba7d5851e318080b2 Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Sat, 19 Nov 2016 06:09:47 +0530 Subject: [PATCH 6/6] Make the example self containing. --- examples/with-loading/components/Header.js | 2 +- examples/with-loading/package.json | 5 +- examples/with-loading/static/nprogress.css | 73 ++++++++++++++++++++++ 3 files changed, 77 insertions(+), 3 deletions(-) create mode 100644 examples/with-loading/static/nprogress.css diff --git a/examples/with-loading/components/Header.js b/examples/with-loading/components/Header.js index 50bcbb52e075b..20f037ec17a18 100644 --- a/examples/with-loading/components/Header.js +++ b/examples/with-loading/components/Header.js @@ -6,7 +6,7 @@ export default () => (
{/* Import CSS for nprogress */} - + diff --git a/examples/with-loading/package.json b/examples/with-loading/package.json index 6a235ce2500d1..3146045703d3c 100644 --- a/examples/with-loading/package.json +++ b/examples/with-loading/package.json @@ -3,11 +3,12 @@ "version": "0.0.0", "description": "", "scripts": { - "dev": "../../dist/bin/next" + "dev": "next" }, "author": "", "license": "ISC", "dependencies": { - "nprogress": "^0.2.0" + "nprogress": "^0.2.0", + "next": "*" } } diff --git a/examples/with-loading/static/nprogress.css b/examples/with-loading/static/nprogress.css new file mode 100644 index 0000000000000..12d8abdbf98c7 --- /dev/null +++ b/examples/with-loading/static/nprogress.css @@ -0,0 +1,73 @@ +/* Make clicks pass-through */ +#nprogress { + pointer-events: none; +} + +#nprogress .bar { + background: #29d; + + position: fixed; + z-index: 1031; + top: 0; + left: 0; + + width: 100%; + height: 2px; +} + +/* Fancy blur effect */ +#nprogress .peg { + display: block; + position: absolute; + right: 0px; + width: 100px; + height: 100%; + box-shadow: 0 0 10px #29d, 0 0 5px #29d; + opacity: 1.0; + + -webkit-transform: rotate(3deg) translate(0px, -4px); + -ms-transform: rotate(3deg) translate(0px, -4px); + transform: rotate(3deg) translate(0px, -4px); +} + +/* Remove these to get rid of the spinner */ +#nprogress .spinner { + display: block; + position: fixed; + z-index: 1031; + top: 15px; + right: 15px; +} + +#nprogress .spinner-icon { + width: 18px; + height: 18px; + box-sizing: border-box; + + border: solid 2px transparent; + border-top-color: #29d; + border-left-color: #29d; + border-radius: 50%; + + -webkit-animation: nprogress-spinner 400ms linear infinite; + animation: nprogress-spinner 400ms linear infinite; +} + +.nprogress-custom-parent { + overflow: hidden; + position: relative; +} + +.nprogress-custom-parent #nprogress .spinner, +.nprogress-custom-parent #nprogress .bar { + position: absolute; +} + +@-webkit-keyframes nprogress-spinner { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } +} +@keyframes nprogress-spinner { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +}