src/components/templates/page/loading-page.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

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

const LoadingPageWithRef: ForwardRefRenderFunction<
  HTMLDivElement,
  Omit<PageProps, 'children'>
> = (props, ref) => {
  const intl = useIntl();
  const loadingMsg = intl.formatMessage({
    defaultMessage: 'The requested page is loading...',
    description: 'LoadingPage: loading message',
    id: '0UzObH',
  });

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

export const LoadingPage = forwardRef(LoadingPageWithRef);