added preload for lab images

src/components/lab/LabImage/index.tsx

@@ -16,6 +16,8 @@ import { PRESETS } from '~/constants/urls';
 import SwiperClass from 'swiper/types/swiper-class';
 import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
 import { Placeholder } from '~/components/placeholders/Placeholder';
+import { normalizeBrightColor } from '~/utils/color';
+import { ImagePreloader } from '~/components/media/ImagePreloader';
 
 SwiperCore.use([Navigation, Pagination, A11y]);
 
@@ -79,12 +81,12 @@ const LabImage: FC<IProps> = ({ node, isLoading }) => {
         >
           {images.map(file => (
             <SwiperSlide className={styles.slide} key={file.id}>
-              <img
+              <ImagePreloader
-                className={styles.image}
+                file={file}
-                src={getURL(file, PRESETS['1600'])}
-                alt={node.title}
                 onLoad={updateSwiper}
                 onClick={onClick}
+                className={styles.image}
+                color={normalizeBrightColor(file?.metadata?.dominant_color)}
               />
             </SwiperSlide>
           ))}

src/components/lab/LabImage/styles.module.scss

@@ -1,11 +1,12 @@
 @import "~/styles/variables.scss";
 
 .wrapper {
-  border-radius: $radius;
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 0;
+  border-radius: $radius $radius 0 0;
+  overflow: hidden;
 
   :global(.swiper-container) {
     width: 100%;