hooks to show node loader

src/components/node/NodeImageBlock/index.tsx

@@ -1,21 +1,41 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { ImageSwitcher } from '../ImageSwitcher';
 import * as styles from './styles.scss';
+import { INode } from '~/redux/types';
+import classNames from 'classnames';
+import { getImageSize } from '~/utils/dom';
+import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 
-interface IProps {}
+interface IProps {
+  is_loading: boolean;
+  node: INode;
+}
 
-const NodeImageBlock: FC<IProps> = ({}) => (
-  <div>
-    <ImageSwitcher total={5} current={2} />
+const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
+  const images = useMemo(() => node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE), [
+    node,
+  ]);
 
-    <div className={styles.image_container}>
-      <img
-        className={styles.image}
-        src="http://37.192.131.144/full/attached/2019/08/e4fb2a1d0a2e20d499aaa1f5f83a7115.jpg"
-        alt=""
-      />
+  return (
+    <div className={classNames(styles.wrap, { is_loading })}>
+      {!is_loading && (
+        <div>
+          <ImageSwitcher total={5} current={2} />
+
+          <div className={styles.image_container}>
+            {images.map(file => (
+              <img
+                className={styles.image}
+                src={getImageSize(file.url, 'node')}
+                alt=""
+                key={file.id}
+              />
+            ))}
+          </div>
+        </div>
+      )}
     </div>
-  </div>
-);
+  );
+};
 
 export { NodeImageBlock };