refactor: avoid 'flash' during hydration.

This seems to be due to hydration and CSS animation.
widgetti · Jan 2, 2024 · 37211fa · 37211fa
1 parent b763688
commit 37211fa
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/solara/server/templates/solara.html.j2 b/solara/server/templates/solara.html.j2
@@ -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>
@@ -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;
                     }