#38 added image preloaders

src/components/input/LoaderCircle/index.tsx

@@ -2,16 +2,15 @@ import React, { FC } from 'react';
 import styles from './styles.module.scss';
 import { describeArc } from '~/utils/dom';
 import classNames from 'classnames';
+import { LoaderCircleInner } from '~/components/input/LoaderCircleInner';
 
 interface IProps {
   size?: number;
+  className?: string;
 }
 
-export const LoaderCircle: FC<IProps> = ({ size = 24 }) => (
-  <div className={classNames(styles.wrap, 'loader-circle')}>
-    <svg className={styles.icon} width={size} height={size}>
-      <path d={describeArc(size / 2, size / 2, size / 2, 0, 90)} />
-      <path d={describeArc(size / 2, size / 2, size / 2, 180, 270)} />
-    </svg>
+export const LoaderCircle: FC<IProps> = ({ size = 24, className }) => (
+  <div className={classNames(styles.wrap, 'loader-circle', className)}>
+    <LoaderCircleInner size={size} />
   </div>
 );

src/components/input/LoaderCircle/styles.module.scss

@@ -1,10 +1,5 @@
 @import "src/styles/variables";
 
-.icon {
-  fill: transparentize(black, 0.6);
-  stroke: none;
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0);

src/components/input/LoaderCircleInner/index.tsx

@@ -0,0 +1,18 @@
+import React, { FC, HTMLAttributes, SVGAttributes } from 'react';
+import { describeArc } from '~/utils/dom';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+interface IProps extends SVGAttributes<SVGElement> {
+  size: number;
+  className?: string;
+}
+
+const LoaderCircleInner: FC<IProps> = ({ size, className, ...props }) => (
+  <svg className={classNames(styles.icon, className)} width={size} height={size} {...props}>
+    <path d={describeArc(size / 2, size / 2, size / 2, 0, 90)} />
+    <path d={describeArc(size / 2, size / 2, size / 2, 180, 270)} />
+  </svg>
+);
+
+export { LoaderCircleInner };

src/components/input/LoaderCircleInner/styles.module.scss

@@ -0,0 +1,5 @@
+
+.icon {
+  fill: transparentize(black, 0.6);
+  stroke: none;
+}

src/components/media/ImagePreloader/index.tsx

@@ -0,0 +1,90 @@
+import React, { FC, MouseEventHandler, useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { describeArc, getURL } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import styles from './styles.module.scss';
+import { IFile } from '~/redux/types';
+import { LoaderCircleInner } from '~/components/input/LoaderCircleInner';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+
+interface IProps {
+  file: IFile;
+  onLoad?: () => void;
+  onClick?: MouseEventHandler;
+  className?: string;
+}
+
+const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
+  const [maxHeight, setMaxHeight] = useState(window.innerHeight - 140);
+  const [loaded, setLoaded] = useState(false);
+
+  const onImageLoad = useCallback(() => {
+    setLoaded(true);
+
+    if (onLoad) {
+      onLoad();
+    }
+  }, [setLoaded, onLoad]);
+
+  const onResize = useCallback(() => {
+    setMaxHeight(window.innerHeight - 140);
+  }, [setMaxHeight]);
+
+  useEffect(() => {
+    window.addEventListener('resize', onResize);
+
+    return () => window.removeEventListener('resize', onResize);
+  }, [onResize]);
+
+  return (
+    <>
+      <svg
+        viewBox={`0 0 ${file?.metadata?.width || 0} ${file?.metadata?.height || 0}`}
+        className={classNames(styles.preview, { [styles.is_loaded]: loaded })}
+        style={{
+          maxHeight,
+          height: file?.metadata?.height || 'auto',
+        }}
+        onClick={onClick}
+      >
+        <defs>
+          <filter id="f1" x="0" y="0">
+            <feGaussianBlur
+              stdDeviation="30 30"
+              x="0%"
+              y="0%"
+              width="100%"
+              height="100%"
+              in="blend"
+              edgeMode="none"
+              result="blur2"
+            />
+          </filter>
+        </defs>
+
+        <rect fill="#242222" width="100%" height="100%" stroke="none" rx="8" ry="8" />
+
+        <image
+          xlinkHref={getURL(file, PRESETS['300'])}
+          width="100%"
+          height="100%"
+          filter="url(#f1)"
+        />
+      </svg>
+
+      <img
+        className={classNames(styles.image, { [styles.is_loaded]: loaded }, className)}
+        src={getURL(file, PRESETS['1600'])}
+        alt=""
+        key={file.id}
+        onLoad={onImageLoad}
+        style={{ maxHeight }}
+        onClick={onClick}
+      />
+
+      {!loaded && <LoaderCircle className={styles.icon} size={64} />}
+    </>
+  );
+};
+
+export { ImagePreloader };

src/components/media/ImagePreloader/styles.module.scss

@@ -0,0 +1,30 @@
+@import "~/styles/variables.scss";
+
+.image {
+  position: absolute;
+  opacity: 0;
+
+  &.is_loaded {
+    opacity: 1;
+    position: static;
+  }
+}
+
+.preview {
+  border-radius: $radius;
+
+  &.is_loaded {
+    display: none;
+  }
+}
+
+.icon {
+  position: absolute;
+  right: 30px;
+  bottom: 40px;
+  opacity: 0.4;
+
+  svg {
+    fill: currentColor;
+  }
+}

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -8,7 +8,7 @@ import 'swiper/components/navigation/navigation.scss';
 import 'swiper/components/lazy/lazy.min.css';
 import styles from './styles.module.scss';
 
-import SwiperCore, { Keyboard, Navigation, Pagination, SwiperOptions, Lazy } from 'swiper';
+import SwiperCore, { Keyboard, Navigation, Pagination, SwiperOptions } from 'swiper';
 
 import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
 import SwiperClass from 'swiper/types/swiper-class';
@@ -17,8 +17,9 @@ import { useDispatch } from 'react-redux';
 import classNames from 'classnames';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
+import { ImagePreloader } from '~/components/media/ImagePreloader';
 
-SwiperCore.use([Lazy, Navigation, Pagination, Keyboard]);
+SwiperCore.use([Navigation, Pagination, Keyboard]);
 
 interface IProps extends INodeComponentProps {}
 
@@ -41,21 +42,22 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
     controlledSwiper.updateSize();
     controlledSwiper.update();
     controlledSwiper.updateAutoHeight();
+    controlledSwiper.updateProgress();
   }, [controlledSwiper]);
 
-  const resetSwiper = useCallback(() => {
-    if (!controlledSwiper) return;
-    controlledSwiper.slideTo(0, 0);
-    setTimeout(() => controlledSwiper.slideTo(0, 0), 100);
-    setTimeout(() => controlledSwiper.slideTo(0, 0), 300);
-  }, [controlledSwiper]);
+  // const resetSwiper = useCallback(() => {
+  //   if (!controlledSwiper) return;
+  //   controlledSwiper.slideTo(0, 0);
+  //   setTimeout(() => controlledSwiper.slideTo(0, 0), 100);
+  //   setTimeout(() => controlledSwiper.slideTo(0, 0), 300);
+  // }, [controlledSwiper]);
 
-  useEffect(() => {
-    updateSwiper();
-    resetSwiper();
-
-    return () => setControlledSwiper(undefined);
-  }, [images, updateSwiper, resetSwiper, setControlledSwiper]);
+  // useEffect(() => {
+  //   updateSwiper();
+  //   resetSwiper();
+  //
+  //   return () => setControlledSwiper(undefined);
+  // }, [images, updateSwiper, resetSwiper, setControlledSwiper]);
 
   const onOpenPhotoSwipe = useCallback(() => {
     dispatch(modalShowPhotoswipe(images, controlledSwiper?.activeIndex || 0));
@@ -74,13 +76,12 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
         breakpoints={breakpoints}
         pagination={{ type: 'fraction' }}
         centeredSlides
-        observeSlideChildren
-        observeParents
-        resizeObserver
-        watchOverflow
-        updateOnImagesReady
-        onInit={resetSwiper}
-        lazy
+        // observeSlideChildren
+        // observeParents
+        // resizeObserver
+        // watchOverflow
+        // updateOnImagesReady
+        // onInit={resetSwiper}
         keyboard={{
           enabled: true,
           onlyInViewport: false,
@@ -92,20 +93,21 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
       >
         {images.map(file => (
           <SwiperSlide className={styles.slide} key={file.id}>
-            <img
-              className={classNames('swiper-lazy', styles.image)}
-              data-src={getURL(file, PRESETS['1600'])}
-              alt={node.title}
+            <ImagePreloader
+              file={file}
               onLoad={updateSwiper}
               onClick={onOpenPhotoSwipe}
+              className={styles.image}
             />
-
-            <div
-              className={classNames(
-                'swiper-lazy-preloader swiper-lazy-preloader-white',
-                styles.loader
-              )}
-            />
+            {/*
+              <img
+                className={classNames('swiper-lazy', styles.image)}
+                src={getURL(file, PRESETS['1600'])}
+                alt={node.title}
+                onLoad={updateSwiper}
+                onClick={onOpenPhotoSwipe}
+              />
+            */}
           </SwiperSlide>
         ))}
       </Swiper>

src/components/node/NodeImageSwiperBlock/styles.module.scss

@@ -100,10 +100,6 @@
   box-shadow: transparentize(black, 0.7) 0 3px 5px;
   opacity: 0;
 
-  &[src] {
-    opacity: 1;
-  }
-
   :global(.swiper-slide-active) & {
     box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
       transparentize(black, 0.7) 0 5px 5px,