From de22625f9723ab944cceb9fa72d07e76ef13509a Mon Sep 17 00:00:00 2001
From: Paul Sarando <psarando@cyverse.org>
Date: Fri, 6 Dec 2024 20:07:12 -0700
Subject: [PATCH] Use `await import` for `lottie-web` in LoadingAnimation

Builds on my laptop are failing when trying to build SSR pages
that use the LoadingAnimation, such as `/instantlaunch/[id]`.

They are not failing in GitHub workflow skaffold builds,
or on other dev machines, for now,
but maybe this will prevent future build errors.
---
 .../vice/loading/LoadingAnimation.js          | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/vice/loading/LoadingAnimation.js b/src/components/vice/loading/LoadingAnimation.js
index 7e76bc886..9aa6103a0 100644
--- a/src/components/vice/loading/LoadingAnimation.js
+++ b/src/components/vice/loading/LoadingAnimation.js
@@ -4,7 +4,6 @@
 import React, { useEffect, useRef } from "react";
 
 import { makeStyles } from "tss-react/mui";
-import lottie from "lottie-web";
 import animation from "./vice_loading.json";
 
 import styles from "./styles";
@@ -17,13 +16,17 @@ function LoadingAnimation() {
     const { classes } = useStyles();
 
     useEffect(() => {
-        lottie.loadAnimation({
-            container: animationContainer.current,
-            renderer: "svg",
-            loop: true,
-            autoplay: true,
-            animationData: animation,
-        });
+        const loadAnimation = async () => {
+            const lottie = (await import("lottie-web")).default;
+            lottie.loadAnimation({
+                container: animationContainer.current,
+                renderer: "svg",
+                loop: true,
+                autoplay: true,
+                animationData: animation,
+            });
+        };
+        loadAnimation();
     }, []);
 
     return <div className={classes.animationBox} ref={animationContainer} />;