tried to make placeholders

src/components/node/Comment/index.tsx

@@ -2,6 +2,7 @@ import React, {FC, HTMLAttributes} from 'react';
 import { Card } from "~/components/containers/Card";
 import * as styles from './styles.scss';
 import classNames = require("classnames");
+import {ParagraphPlaceholder} from "~/components/placeholders/ParagraphPlaceholder";
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
@@ -22,7 +23,11 @@ const Comment: FC<IProps> = ({
         <div className={styles.thumb_image} />
       </div>
 
-      <div className={styles.text} />
+      <div className={styles.text}>
+        {
+          is_empty && <ParagraphPlaceholder />
+        }
+      </div>
     </Card>
 );
 

src/components/placeholders/ParagraphPlaceholder/index.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import { Placeholder } from "~/components/placeholders/Placeholder";
+import * as styles from './styles.scss';
+import {Group} from "~/components/containers/Group";
+
+const ParagraphPlaceholder = ({ }) => (
+  <Group>
+    <div className={styles.para}>
+      <Placeholder width={120} />
+      <Placeholder width={60} />
+      <Placeholder width={30} />
+      <Placeholder width={70} />
+      <Placeholder width={160} />
+      <Placeholder width={30} />
+    </div>
+
+    <div className={styles.para}>
+      <Placeholder width={40} />
+      <Placeholder width={30} />
+      <Placeholder width={120} />
+      <Placeholder width={70} />
+      <Placeholder width={160} />
+      <Placeholder width={30} />
+    </div>
+  </Group>
+);
+
+export { ParagraphPlaceholder };

src/components/placeholders/ParagraphPlaceholder/styles.scss

@@ -0,0 +1,10 @@
+.para {
+  display: grid;
+  grid-template-columns: auto;
+  grid-auto-columns: auto;
+  grid-template-rows: 1fr;
+  grid-column-gap: $gap;
+  grid-auto-flow: column;
+
+  div { display: inline-flex; margin-right: $gap; }
+}

src/components/placeholders/Placeholder/index.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+
+interface IProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+const Placeholder: FC<IProps> = ({ width = 120, height, color }) => (
+  <div
+    className={styles.placeholder}
+    style={{ height, color, width }}
+  />
+);
+
+export { Placeholder };

src/components/placeholders/Placeholder/styles.scss

@@ -0,0 +1,6 @@
+.placeholder {
+  height: 1em;
+  width: 120px;
+  background: transparentize(white, 0.95);
+  border-radius: 1em;
+}