From 408b28134de1f81ba725c5520f1646881de0ce8f Mon Sep 17 00:00:00 2001
From: "Maarten A. Breddels" <maartenbreddels@gmail.com>
Date: Wed, 22 Nov 2023 20:14:25 +0100
Subject: [PATCH] refactor: avoid 'flash' during hydration.

This seems to be due to hydration and CSS animation.
---
 solara/server/templates/solara.html.j2 | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/solara/server/templates/solara.html.j2 b/solara/server/templates/solara.html.j2
index c734a1823..e8df3dd49 100644
--- 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>
@@ -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;
                     }