Presentation: fix images switch, add preloader to images, increase im…

…ages size

src/components/ImageWithPreloader.css

@@ -0,0 +1,13 @@
+.spinner {
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

src/components/ImageWithPreloader.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import './ImageWithPreloader.css';
+
+interface ImageWithPreloaderProps {
+  src: string;
+  imgStyle?: React.CSSProperties;
+}
+
+const ImageWithPreloader: React.FC<ImageWithPreloaderProps> = ({ src, imgStyle }) => {
+  const [loading, setLoading] = useState(true);
+
+  const handleImageLoad = () => {
+    setLoading(false);
+  };
+
+  return (
+    <div style={{ position: 'relative', width: '900px', height: '500px' }}>
+      {loading && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+          }}
+        >
+          <div className="spinner"></div>
+        </div>
+      )}
+      <img
+        src={src}
+        onLoad={handleImageLoad}
+        style={{
+          display: loading ? 'none' : 'block',
+          margin: '0 auto',
+          ...imgStyle,
+        }}
+      />
+    </div>
+  );
+};
+
+export default ImageWithPreloader;

src/pages/presentation/PlayerPresentation.tsx

@@ -1,5 +1,6 @@
 import { Box } from '@mui/material'
 import { getPlayerColor, Player, PlayerUrl } from 'src/utils/types'
+import ImageWithPreloader from 'components/ImageWithPreloader';
 import FlashIcon from 'assets/icons/flash.svg?react'
 import CrownImage from 'assets/icons/crown.svg?react'
 import MedalImage from 'assets/icons/medal.svg?react'
@@ -167,13 +168,7 @@ export default function PlayerPresentation({ player, place }: Props) {
         </Box>
       </Box>
       <Box display="flex" justifyContent="center" marginTop="50px">
-        <Box
-          // style={{ backgroundColor: playerColor }}
-          width="900px"
-          height="470px"
-        >
-          <img src={playerContent.image} style={{ height: '470px' }} />
-        </Box>
+        <ImageContainer imageLink={playerContent.image} />
       </Box>
       <Box
         marginTop="200px"
@@ -236,3 +231,19 @@ function VideoPlayer({ videoLink }: VideoProps) {
     </Box>
   )
 }
+
+type ImageProps = {
+  imageLink: string
+}
+
+function ImageContainer({ imageLink }: ImageProps) {
+  return (
+    <Box
+      // style={{ backgroundColor: playerColor }}
+      width="900px"
+      height="500px"
+    >
+      <ImageWithPreloader key={imageLink} src={imageLink} imgStyle={{ height: '500px' }} />
+    </Box>
+  )
+}