faster HiddenFromSSR implementation

This commit is contained in:
Nolan Lawson 2018-03-18 18:37:19 -07:00
parent 536fa97060
commit add39a7334
3 changed files with 67 additions and 57 deletions

13
package-lock.json generated
View file

@ -8131,20 +8131,15 @@
} }
}, },
"ajv": { "ajv": {
"version": "6.2.1", "version": "6.3.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.2.1.tgz", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.3.0.tgz",
"integrity": "sha1-KKarxJOiq+D7TIUHrK7bQ/pVBnE=", "integrity": "sha1-FlCkERTvAFdMrBC4Ay2PTBSBLac=",
"requires": { "requires": {
"fast-deep-equal": "1.0.0", "fast-deep-equal": "1.0.0",
"fast-json-stable-stringify": "2.0.0", "fast-json-stable-stringify": "2.0.0",
"json-schema-traverse": "0.3.1" "json-schema-traverse": "0.3.1"
} }
}, },
"ajv-keywords": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.1.0.tgz",
"integrity": "sha1-rCsnk5xUPpXSwG5/f1wnvkqlQ74="
},
"ansi-styles": { "ansi-styles": {
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@ -8341,7 +8336,7 @@
"requires": { "requires": {
"acorn": "5.3.0", "acorn": "5.3.0",
"acorn-dynamic-import": "2.0.2", "acorn-dynamic-import": "2.0.2",
"ajv": "6.2.1", "ajv": "6.3.0",
"ajv-keywords": "3.1.0", "ajv-keywords": "3.1.0",
"async": "2.6.0", "async": "2.6.0",
"enhanced-resolve": "3.4.1", "enhanced-resolve": "3.4.1",

View file

@ -1,13 +1,22 @@
<div class="{{hidden ? 'hidden' : ''}}"> <!-- toggled in 2xx.html based on whether the user is logged in or not -->
<div class="hidden-from-ssr {{shown ? 'shown' : ''}}">
<slot></slot> <slot></slot>
</div> </div>
<style>
.hidden-from-ssr {
opacity: 0;
}
.hidden-from-ssr.shown {
opacity: 1;
}
</style>
<script> <script>
export default { export default {
data: () => ({
hidden: true
}),
oncreate () { oncreate () {
this.set({hidden: !process.browser}) this.set({ shown: true })
} },
data: () => ({
shown: false
})
} }
</script> </script>

View file

@ -21,8 +21,8 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
<noscript> <noscript>
<style> <style>
.hidden { .hidden-from-ssr {
opacity: 1; opacity: 1 !important;
} }
</style> </style>
</noscript> </noscript>
@ -63,6 +63,12 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
} }
} }
} }
if (!localStorage.store_currentInstance) {
// if not logged in, show all these "hidden-from-ssr" elements
let style = document.createElement('style')
style.textContent = '.hidden-from-ssr { opacity: 1 !important; }'
document.head.appendChild(style)
}
</script> </script>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;"> <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
<!-- auto-generated w/ build-svg.js --> <!-- auto-generated w/ build-svg.js -->