Merge pull request #33 from paralainer/master

Improved first load time and UX on first load
This commit is contained in:
Igor Adamenko
2018-05-18 17:53:07 +03:00
committed by GitHub
2 changed files with 50 additions and 21 deletions
+17 -20
View File
@@ -51,28 +51,25 @@ export default class Root extends Component {
componentDidMount() {
const { sort } = this.state;
api.getUser()
.then(data => store.set('user', data))
.catch(() => store.set('user', {}))
.finally(() => {
api.find({ sort, url })
.then(({ comments = [] } = {}) => store.set('comments', comments))
.catch(() => store.set('comments', []))
.finally(() => {
this.setState({
isLoaded: true,
user: store.get('user'),
});
setTimeout(this.checkUrlHash);
});
api.getConfig().then(config => {
api.getConfig().then(config => {
store.set('config', config);
this.setState({ config });
})
});
});
Promise.all([
api.getUser()
.then(data => store.set('user', data))
.catch(() => store.set('user', {})),
api.find({ sort, url })
.then(({ comments = [] } = {}) => store.set('comments', comments))
.catch(() => store.set('comments', [])),
]).finally(() => {
this.setState({
isLoaded: true,
user: store.get('user'),
});
setTimeout(this.checkUrlHash);
})
}
checkUrlHash() {
+33 -1
View File
@@ -13,10 +13,42 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iframe_preloader {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 60px;
text-align: center;
font-size: 0;
}
.iframe_preloader__bounce {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 3px;
background-color: #333;
border-radius: 100%;
animation: iframePreloaderBounce 1.4s infinite ease-in-out both;
}
.iframe_preloader__bounce:first-child {animation-delay: -.32s;}
.iframe_preloader__bounce:nth-child(2) {animation-delay: -.16s;}
.iframe_preloader__bounce:last-child {margin-right: 0;}
@keyframes iframePreloaderBounce {
0% {transform: scale(0);}
40% {transform: scale(1);}
80%, 100% {transform: scale(0);}
}
</style>
</head>
<body>
<div id="remark42"></div>
<div id="remark42">
<div class="iframe_preloader">
<div class="iframe_preloader__bounce"></div>
<div class="iframe_preloader__bounce"></div>
<div class="iframe_preloader__bounce"></div>
</div>
</div>
<script>
var lastHeight = 0;
setInterval(function() {