From 1e4081b86ea67158888d431188313f6377672280 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 21 Apr 2020 16:12:29 +0700
Subject: [PATCH] fixed image preloading

---
 src/containers/dialogs/PhotoSwipe/index.tsx   | 18 +++++-------------
 src/containers/dialogs/PhotoSwipe/styles.scss |  2 +-
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/containers/dialogs/PhotoSwipe/index.tsx b/src/containers/dialogs/PhotoSwipe/index.tsx
index 29ce49a9..5694a0f3 100644
--- a/src/containers/dialogs/PhotoSwipe/index.tsx
+++ b/src/containers/dialogs/PhotoSwipe/index.tsx
@@ -26,27 +26,19 @@ type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {}
 const PhotoSwipeUnconnected: FC<Props> = ({ photoswipe, modalSetShown }) => {
   let ref = useRef<HTMLDivElement>(null);
 
-  const items = useMemo(
-    () =>
-      photoswipe.images.map(image => ({
-        src: getURL(image, window.innerWidth < 768 ? PRESETS[900] : PRESETS[1600]),
-      })),
-    [photoswipe.images]
-  );
-
   const closeModal = useCallback(() => modalSetShown(false), [modalSetShown]);
 
   useEffect(() => {
     new Promise(async resolve => {
       const images = await Promise.all(
-        items.map(
-          item =>
+        photoswipe.images.map(
+          image =>
             new Promise(resolveImage => {
               const img = new Image();
 
               img.onload = () => {
                 resolveImage({
-                  src: item.src,
+                  src: getURL(image, window.innerWidth < 768 ? PRESETS[900] : PRESETS[1600]),
                   h: img.naturalHeight,
                   w: img.naturalWidth,
                 });
@@ -56,7 +48,7 @@ const PhotoSwipeUnconnected: FC<Props> = ({ photoswipe, modalSetShown }) => {
                 resolveImage({});
               };
 
-              img.src = item.src;
+              img.src = getURL(image, PRESETS[1600]);
             })
         )
       );
@@ -73,7 +65,7 @@ const PhotoSwipeUnconnected: FC<Props> = ({ photoswipe, modalSetShown }) => {
       ps.listen('destroy', closeModal);
       ps.listen('close', closeModal);
     });
-  }, [items, photoswipe.index]);
+  }, [photoswipe.images, photoswipe.index]);
 
   return (
     <div className="pswp" tabIndex={-1} role="dialog" aria-hidden="true" ref={ref}>
diff --git a/src/containers/dialogs/PhotoSwipe/styles.scss b/src/containers/dialogs/PhotoSwipe/styles.scss
index 076c7f8f..a1591f22 100644
--- a/src/containers/dialogs/PhotoSwipe/styles.scss
+++ b/src/containers/dialogs/PhotoSwipe/styles.scss
@@ -1,5 +1,5 @@
 .bg {
-  background-color: transparent;
+  background-color: transparent !important;
 }
 
 .bar {