displaying profile backdrop

src/components/profile/ProfileBackdrop/index.tsx

@@ -0,0 +1,35 @@
+import React, { FC, useState, useCallback, useEffect } from 'react';
+import { IUser } from '~/redux/auth/types';
+import styles from './styles.scss';
+import { getURL } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import classNames from 'classnames';
+
+interface IProps {
+  cover: IUser['cover'];
+}
+
+const ProfileBackdrop: FC<IProps> = ({ cover }) => {
+  const [is_loaded, setIsLoaded] = useState(false);
+
+  const onLoad = useCallback(() => setIsLoaded(true), [setIsLoaded]);
+
+  const image = getURL(cover, PRESETS.cover);
+
+  useEffect(() => {
+    setIsLoaded(false);
+  }, [cover]);
+
+  if (!cover) return null;
+
+  return (
+    <div
+      className={classNames(styles.cover, { [styles.active]: is_loaded })}
+      style={{ backgroundImage: `url("${image}")` }}
+    >
+      <img src={image} onLoad={onLoad} />
+    </div>
+  );
+};
+
+export { ProfileBackdrop };

src/components/profile/ProfileBackdrop/styles.scss

@@ -0,0 +1,30 @@
+.cover {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: 50% 50% no-repeat/cover;
+  opacity: 0;
+  transition: opacity 1s;
+
+  &.active {
+    opacity: 1;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: url('~/sprites/stripes.svg') transparentize($color: #000000, $amount: 0.5);
+  }
+
+  img {
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+}