Permalink
Browse files

Optimistic page loading thanks to phenomic@0.18.0

  • Loading branch information...
1 parent 0cb5505 commit f5c0c146e5b90d10fd2e0fe39b93fd8f55197ba1 @MoOx MoOx committed Nov 3, 2016
@@ -11,7 +11,7 @@ TopBarProgressIndicator.config({
shadowBlur: 5,
})
-export default class PageLoading extends Component {
+export default class Loading extends Component {
render() {
return (
@@ -1,6 +1,6 @@
.loader {
display: flex;
- height: calc(90vh);
+ height: calc(50vh);
justify-content: center;
align-items: center;
}
@@ -1,5 +1,7 @@
import React, { PropTypes } from "react"
+import { BodyContainer } from "phenomic"
+import Loading from "../../components/Loading"
// import getI18n from "../../i18n/get"
import Contributors from "../../components/Contributors"
import WithHeroHeader from "../WithHeroHeader"
@@ -9,9 +11,11 @@ const AdventCalendar = (props) => (
<div className="r-Grid">
<div className="r-Grid-cell r-minM--8of12 putainde-Post-contents">
<div className="putainde-Post-md">
- <div
- dangerouslySetInnerHTML={{ __html: props.body }}
- />
+ {
+ props.isLoading
+ ? <Loading />
+ : <BodyContainer>{ props.body }</BodyContainer>
+ }
</div>
<footer className="putainde-Post-footer">
@@ -27,9 +31,9 @@ const AdventCalendar = (props) => (
AdventCalendar.propTypes = {
__url: PropTypes.string.isRequired,
__filename: PropTypes.string.isRequired,
+ isLoading: PropTypes.boolean,
head: PropTypes.object.isRequired,
body: PropTypes.string.isRequired,
- rawBody: PropTypes.string.isRequired,
}
AdventCalendar.contextTypes = {
@@ -3,7 +3,9 @@ import cx from "classnames"
import Helmet from "react-helmet"
import { Link } from "react-router"
import enhanceCollection from "phenomic/lib/enhance-collection"
+import { BodyContainer } from "phenomic"
+import Loading from "../../components/Loading"
import supportLocale from "../../components/browser-locale-support"
import getLang from "../../i18n/getLang"
import getI18n from "../../i18n/get"
@@ -66,6 +68,7 @@ export default class Homepage extends Component {
render() {
const {
+ isLoading,
head,
body,
} = this.props
@@ -153,8 +156,11 @@ export default class Homepage extends Component {
{ i18n.howThisWorks }
</h2>
</div>
-
- <div dangerouslySetInnerHTML={{ __html: body }} />
+ {
+ isLoading
+ ? <Loading />
+ : <BodyContainer>{ body }</BodyContainer>
+ }
</div>
</div>
</div>
@@ -1,7 +1,10 @@
import React, { PropTypes } from "react"
import Helmet from "react-helmet"
+import { BodyContainer } from "phenomic"
-const Page = ({ head, body, __url, children }, { metadata }) => (
+import Loading from "../../components/Loading"
+
+const Page = ({ isLoading, head, body, __url, children }, { metadata }) => (
<div className="putainde-Main">
<Helmet
title={ head.title }
@@ -30,7 +33,7 @@ const Page = ({ head, body, __url, children }, { metadata }) => (
}
{
- !body && !children &&
+ !isLoading && !body && !children &&
<div
style={ {
fontSize: "3rem",
@@ -43,10 +46,9 @@ const Page = ({ head, body, __url, children }, { metadata }) => (
</div>
}
{
- body &&
- <div className="putainde-Post-md"
- dangerouslySetInnerHTML={{ __html: body }}
- />
+ isLoading
+ ? <Loading />
+ : <BodyContainer className="putainde-Post-md">{ body }</BodyContainer>
}
{ children }
</div>
@@ -56,6 +58,7 @@ const Page = ({ head, body, __url, children }, { metadata }) => (
Page.propTypes = {
__url: PropTypes.string.isRequired,
+ isLoading: PropTypes.boolean,
head: PropTypes.object.isRequired,
body: PropTypes.string,
children: PropTypes.node,
@@ -1,7 +1,9 @@
import React, { PropTypes } from "react"
import Helmet from "react-helmet"
import DisqusThread from "react-disqus-thread"
+import { BodyContainer } from "phenomic"
+import Loading from "../../components/Loading"
import getI18n from "../../i18n/get"
import Author from "../../components/Author"
import Contributors from "../../components/Contributors"
@@ -10,7 +12,7 @@ import WithHeroHeader from "../WithHeroHeader"
const Post = (props, context) => {
const i18n = getI18n(context)
const { metadata } = context
- const { body, head, __url } = props
+ const { isLoading, body, head, __url } = props
const post = head
const twitterAuthor =
@@ -39,9 +41,11 @@ const Post = (props, context) => {
<div className="r-Grid">
<div className="r-Grid-cell r-minM--8of12 putainde-Post-contents">
<div className="putainde-Post-md">
- <div
- dangerouslySetInnerHTML={{ __html: body }}
- />
+ {
+ isLoading
+ ? <Loading />
+ : <BodyContainer>{ body }</BodyContainer>
+ }
</div>
<footer className="putainde-Post-footer">
@@ -90,6 +94,7 @@ const Post = (props, context) => {
Post.propTypes = {
__url: PropTypes.string.isRequired,
__filename: PropTypes.string.isRequired,
+ isLoading: PropTypes.boolean,
head: PropTypes.object.isRequired,
body: PropTypes.string.isRequired,
rawBody: PropTypes.string.isRequired,
@@ -152,16 +152,20 @@ const WithHeroHeader = (
}
{". "}
- <ReadingTime
- text={rawBody}
- before={i18n.readingTime}
- templateText={{
- 1: i18n.readingTime1,
- 2: i18n.readingTime2,
- }}
- templateTooltip={i18n.readingTimeComment}
- className="putainde-Post-readingTime"
- />
+ {
+ rawBody && (
+ <ReadingTime
+ text={rawBody}
+ before={i18n.readingTime}
+ templateText={{
+ 1: i18n.readingTime1,
+ 2: i18n.readingTime2,
+ }}
+ templateTooltip={i18n.readingTimeComment}
+ className="putainde-Post-readingTime"
+ />
+ )
+ }
</div>
}
{
View
@@ -6,7 +6,6 @@ import AppContainer from "./AppContainer.js"
import Page from "./layouts/Page"
import PageError from "./layouts/PageError"
-import PageLoading from "./layouts/PageLoading"
import Homepage from "./layouts/Homepage"
import Post from "./layouts/Post"
import Posts from "./layouts/Posts"
@@ -24,7 +23,6 @@ class PageContainer extends Component {
layouts={ {
Page,
PageError,
- PageLoading,
Homepage,
Post,
Posts,

0 comments on commit f5c0c14

Please sign in to comment.