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

Jump to bottom

Update with-loading example to SSG #11050

Merged
merged 3 commits into from Mar 13, 2020
Merged

Update with-loading example to SSG #11050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
023f6c8
Update getInitialProps to getStaticProps
jazibjafri Mar 13, 2020
b9d3a34
Merge branch 'canary' into issue-11014
jazibjafri Mar 13, 2020
1851cbc
Updated example
Mar 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/with-loading/README.md
View file
Open in desktop
@@ -1,6 +1,6 @@
# Example app with page loading indicator

Sometimes when switching between pages, Next.js needs to download pages(chunks) from the server before rendering the page. And it may also need to wait for the data. So while doing these tasks, browser might be non responsive.
Sometimes when switching between pages, Next.js needs to download pages(chunks) from the server before rendering the page. And it may also need to wait for the data. So while doing these tasks, the browser might be non responsive.

We can simply fix this issue by showing a loading indicator. That's what this examples shows.

Expand Down
1 change: 0 additions & 1 deletion examples/with-loading/package.json
View file
Open in desktop
@@ -1,7 +1,6 @@
{
"name": "with-loading",
"version": "1.0.0",
"description": "This example features:",
"main": "index.js",
"scripts": {
"dev": "next",
Expand Down
63 changes: 29 additions & 34 deletions examples/with-loading/pages/_app.js
View file
Open in desktop
@@ -1,9 +1,7 @@
import React from 'react'
import App from 'next/app'
import Link from 'next/link'
import NProgress from 'nprogress'
import Router from 'next/router'
import Link from 'next/link'
import Head from 'next/head'
import NProgress from 'nprogress'

Router.events.on('routeChangeStart', url => {
console.log(`Loading: ${url}`)
Expand All @@ -12,34 +10,31 @@ Router.events.on('routeChangeStart', url => {
Router.events.on('routeChangeComplete', () => NProgress.done())
Router.events.on('routeChangeError', () => NProgress.done())

export default class MyApp extends App {
render() {
const { Component, pageProps } = this.props
return (
<>
<Head>
{/* Import CSS for nprogress */}
<link rel="stylesheet" type="text/css" href="/nprogress.css" />
</Head>
<nav>
<style jsx>{`
a {
margin: 0 10px 0 0;
}
`}</style>
<Link href="/">
<a>Home</a>
</Link>
<Link href="/about">
<a>About</a>
</Link>
<Link href="/forever">
<a>Forever</a>
</Link>
<a href="/non-existing">Non Existing Page</a>
</nav>
<Component {...pageProps} />
</>
)
}
export default function App({ Component, pageProps }) {
return (
<>
<Head>
{/* Import CSS for nprogress */}
<link rel="stylesheet" type="text/css" href="/nprogress.css" />
</Head>
<nav>
<style jsx>{`
a {
margin: 0 10px 0 0;
}
`}</style>
<Link href="/">
<a>Home</a>
</Link>
<Link href="/about">
<a>About</a>
</Link>
<Link href="/forever">
<a>Forever</a>
</Link>
<a href="/non-existing">Non Existing Page</a>
</nav>
<Component {...pageProps} />
</>
)
}
6 changes: 2 additions & 4 deletions examples/with-loading/pages/about.js
View file
Open in desktop
@@ -1,12 +1,10 @@
import React from 'react'

const AboutPage = () => <p>This is about Next.js!</p>

AboutPage.getInitialProps = async () => {
export async function getServerSideProps() {
await new Promise(resolve => {
setTimeout(resolve, 500)
})
return {}
return { props: {} }
}

export default AboutPage
6 changes: 2 additions & 4 deletions examples/with-loading/pages/forever.js
View file
Open in desktop
@@ -1,12 +1,10 @@
import React from 'react'

const ForeverPage = () => <p>This page was rendered for a while!</p>

ForeverPage.getInitialProps = async () => {
export async function getServerSideProps() {
await new Promise(resolve => {
setTimeout(resolve, 3000)
})
return {}
return { props: {} }
}

export default ForeverPage
2 changes: 0 additions & 2 deletions examples/with-loading/pages/index.js
View file
Open in desktop
@@ -1,5 +1,3 @@
import React from 'react'

const IndexPage = () => <p>Hello Next.js!</p>

export default IndexPage