vault-frontend/src/components/containers/CoverBackdrop/index.tsx

import React, { FC, useCallback, useEffect, useRef, useState } from 'react';

import classNames from 'classnames';

import { PRESETS } from '~/constants/urls';
import { IUser } from '~/types/auth';
import { getURL } from '~/utils/dom';

import styles from './styles.module.scss';

interface IProps {
  cover: IUser['cover'];
}

const CoverBackdrop: FC<IProps> = ({ cover }) => {
  const ref = useRef<HTMLImageElement>(null);

  const [is_loaded, setIsLoaded] = useState(false);

  const onLoad = useCallback(() => setIsLoaded(true), [setIsLoaded]);

  const image = getURL(cover, PRESETS.cover);

  useEffect(() => {
    if (!cover || !cover.url || !ref || !ref.current) return;

    ref.current.src = '';
    setIsLoaded(false);
    ref.current.src = getURL(cover, PRESETS.cover);
  }, [cover]);

  if (!cover) return null;

  return (
    <div
      className={classNames(styles.cover, { [styles.active]: is_loaded })}
      style={{ backgroundImage: `url("${image}")` }}
    >
      {
        // TODO: use ImageWithSSRLoad here if you will face any bugs
      }
      <img onLoad={onLoad} ref={ref} alt="" />
    </div>
  );
};

export { CoverBackdrop };