Blend "simulation is running" gif background

Author: kvashchuka

frontend/src/components/CenteredImage.tsx

@@ -28,8 +28,14 @@ const Text = styled(Typography)`
     user-select: none;
 `;
 
-const CenteredImage: React.FC<{ src: string; caption?: string }> = ({ src, caption }) => (
-    <Fill>
+interface CenteredImageProps {
+    src: string;
+    caption?: string;
+    className?: string;
+}
+
+const CenteredImage: React.FC<CenteredImageProps> = ({ src, caption, className }) => (
+    <Fill className={className}>
         <Wrapper>
             <Image src={src} />
             <Text variant="body_short_italic">{caption}</Text>

frontend/src/components/Simulation/Working.tsx

@@ -1,6 +1,11 @@
+import styled from "styled-components";
 import icon from "@/assets/VGH.gif";
 import CenteredImage from "@/components/CenteredImage";
 
-const Working = () => <CenteredImage src={icon} caption="Working..." />;
+const BlendedWorking = styled(CenteredImage)`
+    mix-blend-mode: multiply;
+`;
+
+const Working = () => <BlendedWorking src={icon} caption="Working..." />;
 
 export default Working;