fix: only animate the homepage in pre-render when ssg is enabled

widgetti · Sep 11, 2024 · 12b6729 · 12b6729
1 parent 3c1931d
commit 12b6729
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 5 deletions.
diff --git a/solara/server/templates/solara.html.j2 b/solara/server/templates/solara.html.j2
@@ -269,6 +269,12 @@
         solara.production = {{ production | tojson | safe }};
         const themeVariants = ['light', 'dark', 'auto']
         solara.preRendered = {{ pre_rendered_html | safe | length | tojson }} > 0
+        if(solara.preRendered) {
+            document.body.classList.add('solara-ssg', 'solara-pre-rendered');
+        } else {
+            document.body.classList.add('solara-no-ssg');
+        }
+
     </script>
 
     <script>
@@ -329,8 +335,25 @@
                     // if preRendered, the app is not mounted yet
                     // so we mount it when loading becomes false
                     if (solara.preRendered && !this.mounted) {
-                        this.isMounted = true;
-                        this.$mount("#app")
+                        function waitForAnimation(element) {
+                            return new Promise((resolve) => {
+                                element.addEventListener('animationend', resolve, { once: true });
+                            });
+                        }
+
+                        function waitForAllAnimations(elements) {
+                            const animationPromises = Array.from(elements).map(element => waitForAnimation(element));
+                            return Promise.all(animationPromises);
+                        }
+
+                        (async () => {
+                            await waitForAllAnimations(document.querySelectorAll('.solara-ssg-wait-for-animation'));
+                            console.log("animation finished");
+                            document.body.classList.remove('solara-pre-rendered');
+                            document.body.classList.add('solara-pre-rendered-finished');
+                            this.isMounted = true;
+                            this.$mount("#app")
+                        })();
                     } else {
                         this.isMounted = true;
                     }

diff --git a/solara/website/pages/home.vue b/solara/website/pages/home.vue
@@ -11,7 +11,7 @@
                 </a>
             </nav>
             <div class="hero-stars"></div>
-            <div class="hero-planet-element"></div>
+            <div class="hero-planet-element solara-ssg-wait-for-animation"></div>
             <div class="in-hero-banner">
                 Catch Us At PyData Paris, September 25-26, 2024
             </div>
@@ -613,12 +613,16 @@ section#hero > *{
 
     border-radius: 100%;
 
-    animation: 1.5s ease-in 0s 1 sunRise;
     /* border: var(--radius-none, 1px) solid rgba(255, 255, 255, 0.05); */
     background: radial-gradient(51.38% 51.38% at 50% 50%, #14100C 67.59%, #141210 85.76%, #EBAC60 100%);
     box-shadow: 0px 1px 0px 0px #D9B589 inset, 0px -2px 10px 0px rgba(255, 240, 223, 0.50), 0px -2px 40px 0px rgba(217, 179, 137, 0.35), 0px -20px 40px 0px rgba(255, 240, 223, 0.20), 0px -10px 250px 5px #DCB46E;
 }
 
+.solara-pre-rendered #hero .hero-planet-element,
+.solara-no-ssg #hero .hero-planet-element {
+    animation: 1.5s ease-in 0s 1 sunRise;
+}
+
 #hero .hero-stars {
     position: absolute;
     top: 0;
@@ -639,7 +643,10 @@ section#hero > *{
     max-width: 40%;
 }
 
-#hero h1, #hero h2 {
+.solara-pre-rendered #hero h1,
+.solara-pre-rendered #hero h2,
+.solara-no-ssg #hero h1,
+.solara-no-ssg #hero h2 {
     animation: 1.5s ease-in 0s 1 fadeTitles;
 }