Skip to content

Commit

Permalink
refactor: avoid 'flash' during hydration.
Browse files Browse the repository at this point in the history
This seems to be due to hydration and CSS animation.
  • Loading branch information
maartenbreddels committed Nov 22, 2023
1 parent c9e8cc8 commit 408b281
Showing 1 changed file with 9 additions and 1 deletion.
10 changes: 9 additions & 1 deletion solara/server/templates/solara.html.j2
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@
</script>
<style>
{% include "loader-"~theme.loader~".css" %}
.solara-disable-animations, .solara-disable-animations * {
animation: none !important;
transition: none !important;
}
</style>
{% endblock header %}
</head>
Expand Down Expand Up @@ -338,7 +342,11 @@
// so we mount it when loading becomes false
if (solara.preRendered && !this.mounted) {
this.isMounted = true;
this.$mount("#app")
document.body.classList.add('solara-disable-animations');
this.$mount("#app");
setTimeout(() => {
document.body.classList.remove('solara-disable-animations');
}, 1000);
} else {
this.isMounted = true;
}
Expand Down

0 comments on commit 408b281

Please sign in to comment.