New homepage loader (#13)

* style: mobile loader

* style: desktop loader
This commit is contained in:
James Gareth Smith 2019-04-08 11:58:24 +02:00 committed by GitHub
parent 1b16958249
commit c8b4b29408
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 162 additions and 22 deletions

5
package-lock.json generated
View File

@ -14073,6 +14073,11 @@
}
}
},
"react-content-loader": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-4.2.1.tgz",
"integrity": "sha512-XA5irUvZpQAEavfUBo7kc4tdvAbWwVKJolz/+2Pkj/XU7pn78AweAUtn+AxEajN0Srg/mraJ8XMKlUsXOFiknw=="
},
"react-dev-utils": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-8.0.0.tgz",

View File

@ -10,6 +10,7 @@
"node-sass": "^4.11.0",
"prop-types": "^15.7.2",
"react": "^16.8.4",
"react-content-loader": "^4.2.1",
"react-dom": "^16.8.4",
"react-image-fallback": "^8.0.0",
"react-redux": "^6.0.1",

View File

@ -2,36 +2,40 @@ import React from 'react'
import RecentlyAdded from '../RecentlyAdded'
import Categories from '../Categories'
import Footer from '../Footer'
import styles from './Home.module.scss'
import LoadingHome from '../LoadingHome'
class Home extends React.Component {
constructor(props) {
super(props)
this.startLoadingAnimation = this.startLoadingAnimation.bind(this)
this.state = { didMount: false }
this.state = { loaded: false }
}
componentDidMount() {
setTimeout(this.startLoadingAnimation, 0)
// TODO: This is just a demo implementation. The real one would be using a flag in redux
// that changes when the data has loaded from the smart contract/s
setTimeout(this.startLoadingAnimation, 1000)
}
startLoadingAnimation() {
this.setState({ didMount: true })
this.setState({ loaded: true })
}
render() {
const { didMount } = this.state
const { loaded } = this.state
return (
<div
className={
didMount ? [styles.fade, styles.loaded].join(' ') : styles.fade
}
>
<Categories />
<RecentlyAdded />
<Footer />
</div>
<>
{loaded && (
<>
<Categories />
<RecentlyAdded />
<Footer />
</>
)}
{!loaded && <LoadingHome />}
</>
)
}
}

View File

@ -1,8 +0,0 @@
.fade {
filter: contrast(0.8) opacity(0) blur(5px);
}
.loaded {
filter: contrast(1) opacity(1) blur(0);
transition: filter 0.5s ease-in;
}

View File

@ -0,0 +1,120 @@
import React from 'react'
import ContentLoader from 'react-content-loader'
import styles from './LoadingHome.module.scss'
const MobileLoader = () => (
<ContentLoader width={320} height={635}>
<rect x="15" y="15" rx="5" ry="5" width="90" height="110" />
<rect x="113" y="15" rx="5" ry="5" width="90" height="110" />
<rect x="211" y="15" rx="5" ry="5" width="90" height="110" />
<rect x="15" y="132" rx="5" ry="5" width="90" height="110" />
<rect x="113" y="132" rx="5" ry="5" width="90" height="110" />
<rect x="211" y="132" rx="5" ry="5" width="90" height="110" />
<rect x="15" y="250" rx="5" ry="5" width="90" height="110" />
<circle cx="35" cy="456" r="20" />
<rect x="70" y="436" rx="5" ry="5" width="235" height="88" />
<circle cx="35" cy="556" r="20" />
<rect x="70" y="532" rx="5" ry="5" width="235" height="88" />
</ContentLoader>
)
const DesktopLoader = () => (
<ContentLoader width={1700} height={2000}>
<rect x="15" y="50" rx="5" ry="5" width="200" height="85" />
<rect x="223" y="50" rx="5" ry="5" width="200" height="85" />
<rect x="431" y="50" rx="5" ry="5" width="200" height="85" />
<rect x="639" y="50" rx="5" ry="5" width="200" height="85" />
<rect x="847" y="50" rx="5" ry="5" width="200" height="85" />
<rect x="1055" y="50" rx="5" ry="5" width="200" height="85" />
<rect x="1263" y="50" rx="5" ry="5" width="200" height="85" />
<circle cx="35" cy="240" r="20" />
<rect x="70" y="220" rx="5" ry="5" width="325" height="88" />
<circle cx="455" cy="240" r="20" />
<rect x="500" y="220" rx="5" ry="5" width="325" height="88" />
<circle cx="885" cy="240" r="20" />
<rect x="920" y="220" rx="5" ry="5" width="325" height="88" />
<circle cx="1305" cy="240" r="20" />
<rect x="1340" y="220" rx="5" ry="5" width="325" height="88" />
<circle cx="35" cy="368" r="20" />
<rect x="70" y="348" rx="5" ry="5" width="325" height="88" />
<circle cx="455" cy="368" r="20" />
<rect x="500" y="348" rx="5" ry="5" width="325" height="88" />
<circle cx="885" cy="368" r="20" />
<rect x="920" y="348" rx="5" ry="5" width="325" height="88" />
<circle cx="1305" cy="368" r="20" />
<rect x="1340" y="348" rx="5" ry="5" width="325" height="88" />
<circle cx="35" cy="496" r="20" />
<rect x="70" y="476" rx="5" ry="5" width="325" height="88" />
<circle cx="455" cy="496" r="20" />
<rect x="500" y="476" rx="5" ry="5" width="325" height="88" />
<circle cx="885" cy="496" r="20" />
<rect x="920" y="476" rx="5" ry="5" width="325" height="88" />
<circle cx="1305" cy="496" r="20" />
<rect x="1340" y="476" rx="5" ry="5" width="325" height="88" />
<circle cx="35" cy="624" r="20" />
<rect x="70" y="604" rx="5" ry="5" width="325" height="88" />
<circle cx="455" cy="624" r="20" />
<rect x="500" y="604" rx="5" ry="5" width="325" height="88" />
<circle cx="885" cy="624" r="20" />
<rect x="920" y="604" rx="5" ry="5" width="325" height="88" />
<circle cx="1305" cy="624" r="20" />
<rect x="1340" y="604" rx="5" ry="5" width="325" height="88" />
<circle cx="35" cy="752" r="20" />
<rect x="70" y="732" rx="5" ry="5" width="325" height="88" />
<circle cx="455" cy="752" r="20" />
<rect x="500" y="732" rx="5" ry="5" width="325" height="88" />
<circle cx="885" cy="752" r="20" />
<rect x="920" y="732" rx="5" ry="5" width="325" height="88" />
<circle cx="1305" cy="752" r="20" />
<rect x="1340" y="732" rx="5" ry="5" width="325" height="88" />
<circle cx="35" cy="880" r="20" />
<rect x="70" y="860" rx="5" ry="5" width="325" height="88" />
<circle cx="455" cy="880" r="20" />
<rect x="500" y="860" rx="5" ry="5" width="325" height="88" />
<circle cx="885" cy="880" r="20" />
<rect x="920" y="860" rx="5" ry="5" width="325" height="88" />
<circle cx="1305" cy="880" r="20" />
<rect x="1340" y="860" rx="5" ry="5" width="325" height="88" />
<circle cx="35" cy="1008" r="20" />
<rect x="70" y="988" rx="5" ry="5" width="325" height="88" />
<circle cx="455" cy="1008" r="20" />
<rect x="500" y="988" rx="5" ry="5" width="325" height="88" />
<circle cx="885" cy="1008" r="20" />
<rect x="920" y="988" rx="5" ry="5" width="325" height="88" />
<circle cx="1305" cy="1008" r="20" />
<rect x="1340" y="988" rx="5" ry="5" width="325" height="88" />
<circle cx="35" cy="1136" r="20" />
<rect x="70" y="1116" rx="5" ry="5" width="325" height="88" />
<circle cx="455" cy="1136" r="20" />
<rect x="500" y="1116" rx="5" ry="5" width="325" height="88" />
<circle cx="885" cy="1136" r="20" />
<rect x="920" y="1116" rx="5" ry="5" width="325" height="88" />
<circle cx="1305" cy="1136" r="20" />
<rect x="1340" y="1116" rx="5" ry="5" width="325" height="88" />
</ContentLoader>
)
const LoadingHome = () => (
<>
<div className={styles.mobile}>
<MobileLoader />
</div>
<div className={styles.desktop}>
<DesktopLoader />
</div>
</>
)
export default LoadingHome

View File

@ -0,0 +1,15 @@
@import '../../common/styles/variables';
.mobile {
@media (min-width: $desktop) {
display: none;
}
}
.desktop {
display: none;
@media (min-width: $desktop) {
display: block;
}
}

View File

@ -0,0 +1,3 @@
import LoadingHome from './LoadingHome'
export default LoadingHome