From 51873064011c7aa0c15319b8a89930652e502601 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 27 Oct 2020 16:35:45 +0700
Subject: [PATCH] added blurred image for preloading

---
 .../node/NodeImageSlideBlock/index.tsx        | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 3da8172d..6ba8c19b 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -306,9 +306,28 @@ const NodeImageSlideBlock: FC<IProps> = ({
                 <svg
                   viewBox={`0 0 ${file.metadata.width} ${file.metadata.height}`}
                   className={styles.image}
-                  style={{ maxHeight: max_height, width: file.metadata.width }}
+                  style={{
+                    maxHeight: max_height,
+                    // height: file.metadata.height,
+                    width: file.metadata.width,
+                  }}
                 >
-                  <rect fill="blue" width="100%" height="100%" />
+                  <defs>
+                    <filter id="f1" x="0" y="0">
+                      <feGaussianBlur stdDeviation="10" />
+                      <feColorMatrix in="a1" type="saturate" values="0.5" />
+                      <feColorMatrix in="a1" type="brightness" values="2" />
+                    </filter>
+                  </defs>
+
+                  <rect fill="#333333" width="100%" height="100%" />
+
+                  <image
+                    xlinkHref={getURL(file, PRESETS['300'])}
+                    width="100%"
+                    height="100%"
+                    filter="url(#f1)"
+                  />
                 </svg>
                 {
                   <img