CW-placeholder-images Fixed images preload. Fixed arrow position

Author: MeyerPV

src/shared/ui-kit/ImageGallery/ChatImageGallery.tsx

@@ -24,14 +24,26 @@ const ChatImageGallery: FC<ChatImageGalleryProps> = (props) => {
   const isTabletView = useIsTabletView();
   const { isShowing, onOpen, onClose } = useModal(false);
   const [initialSlide, setInitialSlide] = useState(0);
-  const images = (gallery || []).map(({ value }) =>
+  const images = (gallery || []).map(({ value }) => value);
+
+  const imagesWithSrcSets = (gallery || []).map(({ value }) =>
     useResizedFile
-      ? getResizedFileUrl(value, ResizeType.Images, FilePrefix.Image)
+      ? `${getResizedFileUrl(
+          value,
+          ResizeType.Images,
+          FilePrefix.Image,
+        )} 1x, ${value} 2x`
       : value,
   );
 
   const [leftImage, rightImage, secondRowLeftImage, secondRowRightImage] =
     images;
+  const [
+    leftImageSrcSet,
+    rightImageSrcSet,
+    secondRowLeftImageSrcSet,
+    secondRowRightImageSrcSet,
+  ] = imagesWithSrcSets;
 
   const hasOneImage = Boolean(leftImage && !rightImage);
   const singleImageWithoutVideo = hasOneImage && !videoSrc;
@@ -61,6 +73,7 @@ const ChatImageGallery: FC<ChatImageGalleryProps> = (props) => {
             <GalleryMainContent
               videoSrc={videoSrc}
               mainImage={secondRowLeftImage}
+              srcSet={secondRowLeftImageSrcSet}
               hasOneImage={hasOneImage}
             />
           </div>
@@ -79,6 +92,7 @@ const ChatImageGallery: FC<ChatImageGalleryProps> = (props) => {
                 [styles.leftItem]: !hasOneImage,
               })}
               src={leftImage}
+              srcSet={leftImageSrcSet}
               imageOverlayClassName={styles.imageOverlay}
               alt="1st Image"
               onClick={() => handleOpenSlide(0)}
@@ -88,6 +102,7 @@ const ChatImageGallery: FC<ChatImageGalleryProps> = (props) => {
             <Image
               className={styles.image}
               src={rightImage}
+              srcSet={rightImageSrcSet}
               imageContainerClassName={styles.rightItem}
               imageOverlayClassName={styles.imageOverlay}
               alt="2nd Image"
@@ -113,13 +128,15 @@ const ChatImageGallery: FC<ChatImageGalleryProps> = (props) => {
               })}
               imageOverlayClassName={styles.imageOverlay}
               src={secondRowLeftImage}
+              srcSet={secondRowLeftImageSrcSet}
               alt="3st Image"
               onClick={() => handleOpenSlide(2)}
             />
             <Image
               className={styles.image}
               imageContainerClassName={styles.rightItem}
               src={secondRowRightImage}
+              srcSet={secondRowRightImageSrcSet}
               imageOverlayClassName={styles.imageOverlay}
               alt="4nd Image"
               onClick={() => handleOpenSlide(3)}

src/shared/ui-kit/ImageGallery/ImageGallery.tsx

@@ -18,15 +18,7 @@ const ImageGallery: FC<ImageGalleryProps> = (props) => {
   const { gallery, videoSrc, useResizedFile = true } = props;
   const [videoContainerRef, { width: videoContainerWidth }] = useMeasure();
   const { isShowing, onOpen, onClose } = useModal(false);
-  const images = (gallery || []).map(({ value }) =>
-    useResizedFile
-      ? `${getResizedFileUrl(
-          value,
-          ResizeType.Images,
-          FilePrefix.Image,
-        )} 1x, ${value} 2x`
-      : value,
-  );
+  const images = (gallery || []).map(({ value }) => value);
 
   const imagesWithSrcSets = (gallery || []).map(({ value }) =>
     useResizedFile

src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss

@@ -48,9 +48,11 @@
 
 .arrow-wrapper {
   position: absolute;
-  bottom: 2.125rem;
+  top: 50%;
+  transform: translate(0%, -50%);
   z-index: 2;
   color: var(--primary-text);
+  height: 10rem;
 
   &:disabled {
     color: $gray;
@@ -59,7 +61,7 @@
 
 .arrow-wrapper-left {
   @extend .arrow-wrapper;
-  left: 19rem;
+  left: 1rem;
 
   @include tablet {
     left: 18rem;
@@ -69,7 +71,7 @@
 .arrow-wrapper-right {
   @extend .arrow-wrapper;
 
-  right: 19rem;
+  right: 1rem;
 
   @include tablet {
     right: 18rem;