From e2ffdcd1f2ade4f61ba9853a9bc785216fe42142 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Mon, 5 Dec 2022 19:00:56 +0600
Subject: [PATCH] fixed image preloading for swiper

---
 .../node/NodeImageSwiperBlock/index.tsx       | 33 ++++++++++++++-----
 .../NodeImageSwiperBlock/styles.module.scss   |  7 ++--
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx
index 12f93888..b6ea234b 100644
--- a/src/components/node/NodeImageSwiperBlock/index.tsx
+++ b/src/components/node/NodeImageSwiperBlock/index.tsx
@@ -1,16 +1,24 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { observer } from 'mobx-react-lite';
-import SwiperCore, { Keyboard, Navigation, Pagination, SwiperOptions } from 'swiper';
+import Image from 'next/future/image';
+import SwiperCore, {
+  Keyboard,
+  Navigation,
+  Pagination,
+  SwiperOptions,
+} from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import SwiperClass from 'swiper/types/swiper-class';
 
 import { ImagePreloader } from '~/components/media/ImagePreloader';
 import { INodeComponentProps } from '~/constants/node';
+import { ImagePresets } from '~/constants/urls';
 import { useModal } from '~/hooks/modal/useModal';
 import { useImageModal } from '~/hooks/navigation/useImageModal';
 import { useNodeImages } from '~/hooks/node/useNodeImages';
 import { normalizeBrightColor } from '~/utils/color';
+import { getURL } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
@@ -27,7 +35,9 @@ const breakpoints: SwiperOptions['breakpoints'] = {
 const pagination = { type: 'fraction' as const };
 
 const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
-  const [controlledSwiper, setControlledSwiper] = useState<SwiperClass | undefined>(undefined);
+  const [controlledSwiper, setControlledSwiper] = useState<
+    SwiperClass | undefined
+  >(undefined);
   const showPhotoSwiper = useImageModal();
   const { isOpened: isModalActive } = useModal();
 
@@ -38,7 +48,7 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
       enabled: !isModalActive,
       onlyInViewport: true,
     }),
-    [isModalActive]
+    [isModalActive],
   );
 
   const updateSwiper = useCallback(() => {
@@ -53,14 +63,17 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
 
   const onOpenPhotoSwipe = useCallback(
     (index: number) => {
-      if (index !== controlledSwiper?.activeIndex && controlledSwiper?.slideTo) {
+      if (
+        index !== controlledSwiper?.activeIndex &&
+        controlledSwiper?.slideTo
+      ) {
         controlledSwiper.slideTo(index, 300);
         return;
       }
 
       showPhotoSwiper(images, index);
     },
-    [images, controlledSwiper, showPhotoSwiper]
+    [images, controlledSwiper, showPhotoSwiper],
   );
 
   useEffect(() => {
@@ -116,12 +129,16 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
       >
         {images.map((file, i) => (
           <SwiperSlide className={styles.slide} key={file.id}>
-            <ImagePreloader
-              file={file}
+            <Image
+              src={getURL(file, ImagePresets['1600'])}
+              width={file.metadata?.width}
+              height={file.metadata?.height}
               onLoad={updateSwiper}
               onClick={() => onOpenPhotoSwipe(i)}
               className={styles.image}
               color={normalizeBrightColor(file?.metadata?.dominant_color)}
+              alt=""
+              priority={i < 2}
             />
           </SwiperSlide>
         ))}
diff --git a/src/components/node/NodeImageSwiperBlock/styles.module.scss b/src/components/node/NodeImageSwiperBlock/styles.module.scss
index 46d4d405..0b2a3506 100644
--- a/src/components/node/NodeImageSwiperBlock/styles.module.scss
+++ b/src/components/node/NodeImageSwiperBlock/styles.module.scss
@@ -95,12 +95,12 @@
   width: auto;
   max-width: 100vw;
   opacity: 1;
-  //transform: translate(0, 10px);
   transform: scale(0.99);
   filter: brightness(50%) saturate(0.5);
   transition: opacity 0.5s, filter 0.5s, transform 0.5s;
   padding-bottom: $gap * 1.5;
   padding-top: $gap;
+  position: relative;
 
   &:global(.swiper-slide-active) {
     opacity: 1;
@@ -117,12 +117,11 @@
 }
 
 .image {
-  max-height: calc(100vh - 70px - 70px);
-  max-width: 100%;
+  max-inline-size: min(calc(100vh - 70px - 70px), 100vw);
+  block-size: auto;
   border-radius: $radius;
   transition: box-shadow 1s;
   box-shadow: transparentize(black, 0.7) 0 3px 5px;
-  opacity: 0;
 
   :global(.swiper-slide-active) & {
     box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,