refactor: avoid 'flash' during hydration.

This seems to be due to hydration and CSS animation.
widgetti · Dec 11, 2023 · c11e0fb · c11e0fb
1 parent 98d8802
commit c11e0fb
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
@@ -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>
@@ -339,7 +343,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;
                     }