From b7570aafe6520bff3b0ac7bd066395204c4011ae Mon Sep 17 00:00:00 2001 From: stalov Date: Tue, 15 May 2018 23:13:36 +1000 Subject: [PATCH 1/2] Improved first load speed by doing parallel requests --- web/app/components/root/root.jsx | 37 +++++++++++++++----------------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/web/app/components/root/root.jsx b/web/app/components/root/root.jsx index d2c11f0d..c31d208a 100644 --- a/web/app/components/root/root.jsx +++ b/web/app/components/root/root.jsx @@ -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() { From fb93aa672757fa9aa8949360036c82031829948d Mon Sep 17 00:00:00 2001 From: stalov Date: Tue, 15 May 2018 23:14:54 +1000 Subject: [PATCH 2/2] Preloaded built insite iframe, so first load without cached js bundle is more user-friendly --- web/iframe.html | 34 +++++++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/web/iframe.html b/web/iframe.html index a1cb7180..af90da77 100644 --- a/web/iframe.html +++ b/web/iframe.html @@ -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);} + } -
+
+
+
+
+
+
+