node no comments

src/components/node/NodeNoComments/index.tsx

@@ -1,16 +1,25 @@
 import React, { FC } from 'react';
-import { Comment } from '~/components/node/Comment';
 import * as styles from './styles.scss';
 import { Group } from '~/components/containers/Group';
+import classNames from 'classnames';
+import { Filler } from '~/components/containers/Filler';
+import { ERRORS } from '~/constants/errors';
+import { t } from '~/utils/trans';
 
-interface IProps {}
+interface IProps {
+  is_loading: boolean;
+}
 
-const NodeNoComments: FC<IProps> = () => (
-  <Group className={styles.wrap}>
-    <Comment is_empty is_loading={false} style={{ height: 94 }} />
-    <Comment is_empty is_loading={false} style={{ height: 104 }} />
-    <Comment is_empty is_loading={false} style={{ height: 100 }} />
-  </Group>
+const NodeNoComments: FC<IProps> = ({ is_loading = false }) => (
+  <>
+    <Group className={classNames(styles.wrap, { is_loading })}>
+      <div className={styles.card} />
+      <div className={styles.card}>{!is_loading && t(ERRORS.NO_COMMENTS)}</div>
+      <div className={styles.card} />
+    </Group>
+
+    <Filler />
+  </>
 );
 
 export { NodeNoComments };

src/components/node/NodeNoComments/styles.scss

@@ -1,6 +1,43 @@
+@keyframes fade {
+  0% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 0.1;
+  }
+}
 .wrap {
   height: 300px;
   overflow: hidden;
+  position: relative;
 
   @include after_shade($node_bg);
+
+  &:global(.is_loading) {
+    .card {
+      animation: fade 0.5s infinite alternate;
+    }
+  }
+}
+
+.card {
+  opacity: 0.2;
+  border-radius: $radius;
+  height: 96px;
+  background: $comment_bg;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: uppercase;
+  font: $font_18_semibold;
+  color: transparentize(white, 0.5);
+  @include outer_shadow();
+
+  &:nth-child(2) {
+    // animation-delay: -300ms !important;
+  }
+
+  &:nth-child(3) {
+    // animation-delay: -600ms !important;
+  }
 }