added placeholders

src/components/placeholders/Paragraph/index.tsx

@@ -0,0 +1,35 @@
+import React, { FC, useMemo } from 'react';
+import { Placeholder, PlaceholderProps } from '~/components/placeholders/Placeholder';
+import styles from './styles.module.scss';
+import { Group } from '~/components/containers/Group';
+
+type Props = PlaceholderProps & {
+  lines?: number;
+  wordsLimit?: number;
+};
+
+const Paragraph: FC<Props> = ({ lines = 3, wordsLimit = 12, ...props }) => {
+  const iters = useMemo(
+    () =>
+      [...new Array(lines)].map(() =>
+        [...new Array(Math.ceil(Math.random() * wordsLimit))].map((_, i) => i)
+      ),
+    [lines, wordsLimit]
+  );
+
+  console.log({ iters });
+
+  return (
+    <Group>
+      {iters.map(words => (
+        <div className={styles.para}>
+          {words.map(word => (
+            <Placeholder key={word} width={`${Math.round(Math.random() * 120) + 60}px`} active />
+          ))}
+        </div>
+      ))}
+    </Group>
+  );
+};
+
+export { Paragraph };

src/components/placeholders/Paragraph/styles.module.scss

@@ -0,0 +1,12 @@
+@import "src/styles/variables";
+
+.para {
+  display: flex;
+  flex-wrap: wrap;
+
+  div {
+    display: inline-flex;
+    margin-right: $gap;
+    margin-top: $gap;
+  }
+}

src/components/placeholders/ParagraphPlaceholder/index.tsx

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

src/components/placeholders/ParagraphPlaceholder/styles.module.scss

@@ -1,12 +0,0 @@
-@import "src/styles/variables";
-
-.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

@@ -1,14 +1,31 @@
 import React, { FC } from 'react';
 import styles from './styles.module.scss';
+import classNames from 'classnames';
 
-interface IProps {
+export interface PlaceholderProps {
   width?: string;
   height?: number;
   color?: string;
+  active?: boolean;
+  loading?: boolean;
 }
 
-const Placeholder: FC<IProps> = ({ width = '120px', height, color }) => (
-  <div className={styles.placeholder} style={{ height, color, width }} />
-);
+const Placeholder: FC<PlaceholderProps> = ({
+  width = '120px',
+  height,
+  color,
+  active,
+  children,
+  loading = true,
+}) => {
+  return active ? (
+    <div
+      className={classNames(styles.placeholder, { [styles.loading]: loading })}
+      style={{ height, color, width }}
+    />
+  ) : (
+    <>{children}</>
+  );
+};
 
 export { Placeholder };

src/components/placeholders/Placeholder/styles.module.scss

@@ -1,8 +1,31 @@
 @import "src/styles/variables";
 
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0.05;
+  }
+}
 .placeholder {
   height: 1em;
   width: 120px;
   background: $placeholder_bg;
   border-radius: 1em;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: ' ';
+    width: 200%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: white;
+    animation: fade 0.5s infinite alternate;
+    border-radius: 1em;
+  }
 }