feat: migrate AnimatedPlaceholder component

Migrate AnimatedPlaceholder component from nodejs.dev
and create a new Story.

Fixes: nodejs#5193

components/Common/AnimatedPlaceholder/AnimatedPlaceholder.stories.tsx

@@ -0,0 +1,5 @@
+import AnimatedPlaceholder from './index';
+
+export default { component: AnimatedPlaceholder };
+
+export const Default = {};

components/Common/AnimatedPlaceholder/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnimatedPlaceholder component should render correctly with default skeleton 1`] = `
+<div>
+  <div
+    class="placeholder"
+    style="width: 400px; height: 50px;"
+  >
+    <div
+      class="placeholderImage"
+    />
+    <div
+      class="placeholderText"
+    >
+      <div
+        class="placeholderTextLine"
+      />
+      <div
+        class="placeholderTextLine"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AnimatedPlaceholder component should support passing loader skeleton from outside 1`] = `
+<div>
+  <div
+    class="placeholder"
+    style="width: 400px; height: 50px;"
+  >
+    <div
+      class="animated-placeholder__image"
+    />
+  </div>
+</div>
+`;

components/Common/AnimatedPlaceholder/__tests__/index.test.tsx

@@ -0,0 +1,20 @@
+import { render } from '@testing-library/react';
+import AnimatedPlaceholder from './../index';
+
+describe('AnimatedPlaceholder component', () => {
+  it('should render correctly with default skeleton', () => {
+    const { container } = render(<AnimatedPlaceholder />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should support passing loader skeleton from outside', () => {
+    const { container } = render(
+      <AnimatedPlaceholder>
+        <div className="animated-placeholder__image" />
+      </AnimatedPlaceholder>
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

components/Common/AnimatedPlaceholder/index.module.scss

@@ -0,0 +1,47 @@
+.animatedBackground,
+%animated-background {
+  animation-duration: 1.25s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeHolderShimmer;
+  animation-timing-function: linear;
+  background: #f6f6f6;
+  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
+  background-size: 800px 104px;
+  height: 96px;
+  position: relative;
+}
+
+.placeholder {
+  display: flex;
+  width: 100%;
+
+  @keyframes placeHolderShimmer {
+    0% {
+      background-position: -468px 0;
+    }
+    100% {
+      background-position: 468px 0;
+    }
+  }
+
+  &Image {
+    @extend %animated-background;
+
+    height: 40px;
+    margin-right: 5px;
+    min-width: 40px;
+  }
+
+  &Text {
+    width: 100%;
+  }
+
+  &TextLine {
+    @extend %animated-background;
+
+    height: 10px;
+    margin: 4px 0;
+    width: 100%;
+  }
+}

components/Common/AnimatedPlaceholder/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styles from './index.module.scss';
+
+interface Props {
+  children?: React.ReactNode;
+  width?: number;
+  height?: number;
+}
+
+const AnimatedPlaceholder = ({
+  children,
+  width = 400,
+  height = 50,
+}: Props) => (
+  <div
+    className={styles.placeholder}
+    style={{ width: `${width}px`, height: `${height}px` }}
+  >
+    {/* Prefer external skeleton structure or render default in case not passed */}
+    {children}
+    {!children && (
+      <>
+        <div className={styles.placeholderImage} />
+        <div className={styles.placeholderText}>
+          <div className={styles.placeholderTextLine} />
+          <div className={styles.placeholderTextLine} />
+        </div>
+      </>
+    )}
+  </div>
+);
+
+export default AnimatedPlaceholder;