src/components/templates/page/loading-page-comments.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import {
  forwardRef,
  type ForwardRefRenderFunction,
  type HTMLAttributes,
} from 'react';
import { useIntl } from 'react-intl';
import { Spinner } from '../../atoms';
import styles from './page.module.scss';

export type LoadingPageCommentsProps = Omit<
  HTMLAttributes<HTMLDivElement>,
  'children'
>;

const LoadingPageCommentsWithRef: ForwardRefRenderFunction<
  HTMLDivElement,
  LoadingPageCommentsProps
> = ({ className = '', ...props }, ref) => {
  const wrapperClass = `${styles.comments} ${className}`;
  const intl = useIntl();
  const loadingMsg = intl.formatMessage({
    defaultMessage: 'The comments are loading...',
    description: 'LoadingPageComments: loading message',
    id: 'gYbxP4',
  });

  return (
    <div {...props} className={wrapperClass} ref={ref}>
      <Spinner className={styles.spinner}>{loadingMsg}</Spinner>
    </div>
  );
};

export const LoadingPageComments = forwardRef(LoadingPageCommentsWithRef);