add darmode animation to fallback component

This commit is contained in:
karenvicent committed 2025-07-29 10:07:37 -04:00
1 parent d1e9a1221f
commit 24e7b1c224
2 files changed
+13 -16

No files matched your search

@@ -3,28 +3,25 @@ import Box from "@mui/material/Box";
import Background from "../../assets/Images/background-grid.svg?react";
import SkeletonDark from "../../assets/Images/create-placeholder-dark.svg?react";
import OutputAnimation from "../../assets/Animations/output.gif";
import DarkmodeOutput from "../../assets/Animations/darkmodeOutput.gif";
import { useSelector } from "react-redux";
const FallbackBackground = () => {
const theme = useTheme();
const mode = useSelector((state) => state.ui.mode);
return (
<>
{mode === "light" ? (
<Box
component="img"
src={OutputAnimation}
Background="transparent"
alt="Loading animation"
sx={{
zIndex: 1,
border: "none",
borderRadius: theme.spacing(8),
width: "100%",
}}
/>
) : (
<SkeletonDark style={{ zIndex: 1 }} />
)}
<Box
component="img"
src={mode === "light" ? OutputAnimation : DarkmodeOutput}
Background="transparent"
alt="Loading animation"
sx={{
zIndex: 1,
border: "none",
borderRadius: theme.spacing(8),
width: "100%",
}}
/>
<Box
className="background-pattern-svg"
sx={{
Binary file not shown.

After

Width:  |  Height:  |  Size: 305 KiB