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 Jan 2, 2024
1 parent b763688 commit 37211fa
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 @@ -42,6 +42,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 @@ -334,7 +338,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 37211fa

Please sign in to comment.