From 3af977d9b52624d05f6c010aa054e82fd9a0c0cf Mon Sep 17 00:00:00 2001
From: "Maarten A. Breddels" <maartenbreddels@gmail.com>
Date: Wed, 22 Nov 2023 20:10:54 +0100
Subject: [PATCH] refactor: use vue hydration to avoid re-rendering whole page

This avoids a flash due to animations/transitions being triggered.
---
 solara/server/templates/solara.html.j2 | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/solara/server/templates/solara.html.j2 b/solara/server/templates/solara.html.j2
index c734a1823..22fdc4cc2 100644
--- a/solara/server/templates/solara.html.j2
+++ b/solara/server/templates/solara.html.j2
@@ -205,14 +205,16 @@
     {% endif %}
     {% if theme.variant == "auto" %}
     {% endif %}
-    {% if theme.variant == "light" %}
+    {%- if theme.variant == "light" -%}
     <div id="app" class="v-application v-application--is-ltr theme--light" data-app="true">
-    {% elif theme.variant == "dark" %}
+    {%- elif theme.variant == "dark" -%}
     <div id="app" class="v-application v-application--is-ltr theme--dark" data-app="true">
-    {% endif %}
+    {%- endif -%}
         {{ pre_rendered_html|safe }}
+        {%- if pre_rendered_html|length == 0 -%}
         {# next div is used in ssg code to see if vue took over rendering #}
         <div id="pre-rendered-html-present" style="display: none"></div>
+        {%- endif -%}
     </div>
     {% if vue3 == True %}
         {% if production %}
@@ -338,7 +340,7 @@
                     // so we mount it when loading becomes false
                     if (solara.preRendered && !this.mounted) {
                         this.isMounted = true;
-                        this.$mount("#app")
+                        this.$mount("#app", true);
                     } else {
                         this.isMounted = true;
                     }