Desktop/ts/components/ProgressModal.dom.tsx

// Copyright 2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import { memo, useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { ProgressDialog } from './ProgressDialog.dom.tsx';
import type { LocalizerType } from '../types/Util.std.ts';

export type PropsType = {
  readonly i18n: LocalizerType;
  readonly description?: string;
};

export const ProgressModal = memo(function ProgressModalInner({
  description,
  i18n,
}: PropsType) {
  const [root, setRoot] = useState<HTMLElement | null>(null);

  // Note: We explicitly don't register for user interaction here, since this dialog
  //   cannot be dismissed.

  useEffect(() => {
    const div = document.createElement('div');
    document.body.appendChild(div);
    setRoot(div);

    return () => {
      document.body.removeChild(div);
      setRoot(null);
    };
  }, []);

  return root
    ? createPortal(
        <div role="presentation" className="module-progress-dialog__overlay">
          <ProgressDialog description={description} i18n={i18n} />
        </div>,
        root
      )
    : null;
});