fixed node related

src/components/node/NodeRelated/index.tsx

@@ -2,35 +2,28 @@ import React, { FC } from 'react';
 import * as styles from './styles.scss';
 import { Group } from '~/components/containers/Group';
 import { INode } from '~/redux/types';
-import { getURL } from '~/utils/dom';
+import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
-import { withRouter, RouteComponentProps } from 'react-router';
-import { URLS } from '~/constants/urls';
 
-type IProps = RouteComponentProps & {
+interface IProps {
   title: string;
   items: Partial<INode>[];
+}
+
+const NodeRelated: FC<IProps> = ({ title, items }) => {
+  return (
+    <Group className={styles.wrap}>
+      <div className={styles.title}>
+        <div className={styles.line} />
+        <div className={styles.text}>{title}</div>
+        <div className={styles.line} />
+      </div>
+      <div className={styles.grid}>
+        {items.map(item => (
+          <NodeRelatedItem item={item} key={item.id} />
+        ))}
+      </div>
+    </Group>
+  );
 };
 
-const NodeRelatedUnconnected: FC<IProps> = ({ title, items, history }) => (
-  <Group className={styles.wrap}>
-    <div className={styles.title}>
-      <div className={styles.line} />
-      <div className={styles.text}>{title}</div>
-      <div className={styles.line} />
-    </div>
-    <div className={styles.grid}>
-      {items.map(item => (
-        <div
-          className={styles.item}
-          key={item.id}
-          style={{ backgroundImage: `url("${getURL({ url: item.thumbnail })}")` }}
-          onClick={() => history.push(URLS.NODE_URL(item.id))}
-        />
-      ))}
-    </div>
-  </Group>
-);
-
-const NodeRelated = withRouter(NodeRelatedUnconnected);
-
 export { NodeRelated };

src/components/node/NodeRelated/styles.scss

@@ -17,15 +17,6 @@
     grid-template-columns: repeat(6, 1fr);
   }
 }
-
-.item {
-  background: lighten($content_bg, 2%) 50% 50% no-repeat;
-  background-size: cover;
-  padding-bottom: 100%;
-  border-radius: $cell_radius;
-  cursor: pointer;
-}
-
 .title {
   font: $font_14_semibold;
   text-transform: uppercase;

src/components/node/NodeRelatedItem/index.tsx

@@ -0,0 +1,35 @@
+import React, { FC, memo, useCallback, useState } from 'react';
+import * as styles from './styles.scss';
+import classNames from 'classnames';
+import { INode } from '~/redux/types';
+import { URLS } from '~/constants/urls';
+import { RouteComponentProps, withRouter } from 'react-router';
+import { getURL } from '~/utils/dom';
+
+type IProps = RouteComponentProps & {
+  item: Partial<INode>;
+};
+
+const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
+  const [is_loaded, setIsLoaded] = useState(false);
+  const onClick = useCallback(() => history.push(URLS.NODE_URL(item.id)), [item, history]);
+
+  return (
+    <div
+      className={classNames(styles.item, { [styles.is_loaded]: is_loaded })}
+      key={item.id}
+      onClick={onClick}
+    >
+      <div
+        className={styles.thumb}
+        style={{ backgroundImage: `url("${getURL({ url: item.thumbnail })}")` }}
+      />
+
+      <img src={getURL({ url: item.thumbnail })} alt="loader" onLoad={() => setIsLoaded(true)} />
+    </div>
+  );
+});
+
+const NodeRelatedItem = withRouter(NodeRelatedItemUnconnected);
+
+export { NodeRelatedItem };

src/components/node/NodeRelatedItem/styles.scss

@@ -0,0 +1,30 @@
+.item {
+  background: lighten($content_bg, 2%) 50% 50% no-repeat;
+  padding-bottom: 100%;
+  border-radius: $cell_radius;
+  cursor: pointer;
+  position: relative;
+
+  img {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+}
+
+.thumb {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: $cell_radius;
+  background: lighten($content_bg, 2%) 50% 50% no-repeat;
+  background-size: cover;
+  opacity: 0;
+  transition: opacity 0.5s;
+  will-change: opacity;
+
+  .is_loaded & {
+    opacity: 1;
+  }
+}