mirror of
https://github.com/status-im/discover-dapps.git
synced 2025-01-11 11:14:47 +00:00
New homepage loader (#13)
* style: mobile loader * style: desktop loader
This commit is contained in:
parent
1b16958249
commit
c8b4b29408
5
package-lock.json
generated
5
package-lock.json
generated
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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 />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
120
src/modules/LoadingHome/LoadingHome.jsx
Normal file
120
src/modules/LoadingHome/LoadingHome.jsx
Normal 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
|
15
src/modules/LoadingHome/LoadingHome.module.scss
Normal file
15
src/modules/LoadingHome/LoadingHome.module.scss
Normal 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;
|
||||
}
|
||||
}
|
3
src/modules/LoadingHome/index.js
Normal file
3
src/modules/LoadingHome/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import LoadingHome from './LoadingHome'
|
||||
|
||||
export default LoadingHome
|
Loading…
x
Reference in New Issue
Block a user