From e4c9d6571f0e0e748e2ccbd1f45cbb66e2ba7e5e Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Mon, 26 Dec 2022 14:03:39 +0600
Subject: [PATCH] fixed related items loading animations

---
 src/components/node/NodeRelated/placeholder.tsx    |  2 +-
 src/components/node/NodeRelated/styles.module.scss | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/node/NodeRelated/placeholder.tsx b/src/components/node/NodeRelated/placeholder.tsx
index b9a8d011..e1749b2e 100644
--- a/src/components/node/NodeRelated/placeholder.tsx
+++ b/src/components/node/NodeRelated/placeholder.tsx
@@ -23,7 +23,7 @@ const NodeRelatedPlaceholder: FC<IProps> = memo(() => {
       </div>
 
       <div className={styles.grid}>
-        {range(0, 6).map(el => (
+        {range(0, 6).map((el) => (
           <div className={cell_style.item} key={el} />
         ))}
       </div>
diff --git a/src/components/node/NodeRelated/styles.module.scss b/src/components/node/NodeRelated/styles.module.scss
index 3bcd2b74..1d4de34d 100644
--- a/src/components/node/NodeRelated/styles.module.scss
+++ b/src/components/node/NodeRelated/styles.module.scss
@@ -1,5 +1,14 @@
 @import 'src/styles/variables';
 
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.2;
+  }
+}
+
 .wrap {
   border-radius: $panel_radius;
   padding: $gap 0;
@@ -39,6 +48,7 @@
   .grid {
     div {
       background: $placeholder_bg;
+      animation: fade 0.5s infinite alternate;
     }
   }
 }