All files / app/components MapAnimation.tsx

84.21% Statements 16/19
0% Branches 0/3
66.66% Functions 2/3
84.21% Lines 16/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 851x 1x 1x 1x 1x 1x   1x   1x                 1x                     3x 2x 2x 2x   2x 1x                                       2x                                                          
import { Skeleton, styled, Typography } from "@mui/material";
import { useTranslation } from "i18n";
import { LANDING } from "i18n/namespaces";
import Lottie from "lottie-react";
import Sentry from "platform/sentry";
import { useEffect, useState } from "react";
 
import Alert from "./Alert";
 
const Wrapper = styled("div")({
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  position: "relative",
  width: "100%",
  height: "100%",
});
 
const Attribution = styled(Typography)({
  position: "absolute",
  bottom: 8,
  right: 10,
  background: "rgba(255,255,255,0.8)",
  padding: "2px 8px",
  borderRadius: 4,
  pointerEvents: "none",
  zIndex: 2,
});
 
export default function MapAnimation() {
  const { t } = useTranslation([LANDING]);
  const [animationData, setAnimationData] = useState(null);
  const [error, setError] = useState<Error | null>(null);
 
  useEffect(() => {
    fetch("https://cdn.couchers.org/img/hero/hero-animation.json")
      .then((res) => {
        Iif (!res.ok) {
          Sentry.captureException(
            `Failed to load map animation: ${res.statusText}`,
            {
              tags: {
                component: "auth/useAuthStore",
                action: "logout",
                status: res.status,
              },
            },
          );
        }
        return res.json();
      })
      .then(setAnimationData)
      .catch(setError);
  }, []);
 
  Iif (error) {
    return (
      <Alert severity="error" sx={{ width: "100%" }}>
        {t("landing:animation_error")}
      </Alert>
    );
  }
 
  return (
    <Wrapper>
      {animationData ? (
        <>
          <Lottie
            animationData={animationData}
            loop={true}
            height="500px"
            width="500px"
          />
          <Attribution variant="caption">Map data ©2025 Google</Attribution>
        </>
      ) : (
        <Skeleton
          variant="rectangular"
          sx={{ width: "500px", height: "500px", borderRadius: "10px" }}
        />
      )}
    </Wrapper>
  );
}