Skip to content

Commit

Permalink
Use await import for lottie-web in LoadingAnimation
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
psarando committed Dec 9, 2024
1 parent 1ef6170 commit de22625
Showing 1 changed file with 11 additions and 8 deletions.
19 changes: 11 additions & 8 deletions src/components/vice/loading/LoadingAnimation.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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} />;
Expand Down

0 comments on commit de22625

Please sign in to comment.