packages/components/containers/app/LoaderPage.tsx

   1 import type { SyntheticEvent } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button, CircleLoader } from '@proton/atoms';
   6 import Icon from '@proton/components/components/icon/Icon';
   7 import TextLoader from '@proton/components/components/loader/TextLoader';
   8 import Tooltip from '@proton/components/components/tooltip/Tooltip';
   9 import useConfig from '@proton/components/hooks/useConfig';
  10 import useDocumentTitle from '@proton/components/hooks/useDocumentTitle';
  11 import { getAppName } from '@proton/shared/lib/apps/helper';
  12 import { getAppFromPathnameSafe } from '@proton/shared/lib/apps/slugHelper';
  13 import { closeDrawerFromChildApp, getIsAuthorizedApp } from '@proton/shared/lib/drawer/helpers';
  14 import { getIsIframe } from '@proton/shared/lib/helpers/browser';
  15 import protonSpinner from '@proton/styles/assets/img/loading-spinners/proton-spinner.svg';
  16 import clsx from '@proton/utils/clsx';
  17
  18 interface Props {
  19     documentTitle?: string;
  20     text?: string;
  21     loaderClassName?: string;
  22 }
  23
  24 const LoaderPage = ({ documentTitle = '', text, loaderClassName = '' }: Props) => {
  25     const { APP_NAME } = useConfig();
  26
  27     const isIframe = getIsIframe();
  28     const parentApp = getAppFromPathnameSafe(window.location.pathname);
  29     const isDrawerApp = isIframe && !!parentApp && getIsAuthorizedApp(parentApp);
  30
  31     const appName = getAppName(APP_NAME);
  32     const textToDisplay = text || c('Info').t`Loading ${appName}`;
  33
  34     useDocumentTitle(documentTitle || appName);
  35
  36     const handleCloseIFrame = () => {
  37         if (!parentApp) {
  38             return;
  39         }
  40         closeDrawerFromChildApp(parentApp, APP_NAME);
  41     };
  42
  43     const preventDefaultEvent = (e: SyntheticEvent) => e.preventDefault();
  44
  45     return (
  46         <div
  47             className="loader-page h-full"
  48             // Ignore drag & drop during loading to avoid issue when user drops
  49             // file too soon before the app is ready causing stop of the app
  50             // load and showing the file instead.
  51             onDragOver={preventDefaultEvent}
  52             onDragEnter={preventDefaultEvent}
  53             onDragEnd={preventDefaultEvent}
  54             onDrop={preventDefaultEvent}
  55         >
  56             <div className={clsx(['absolute inset-center text-center', isDrawerApp && 'w-9/10'])}>
  57                 {isDrawerApp && <CircleLoader className="m-auto color-primary" size="medium" />}
  58                 {!isIframe && (
  59                     <div>
  60                         <img
  61                             className={clsx(['w-custom', loaderClassName])}
  62                             style={{ '--w-custom': '10em' }}
  63                             src={protonSpinner}
  64                             aria-hidden="true"
  65                             alt=""
  66                         />
  67                     </div>
  68                 )}
  69                 <TextLoader className="color-weak">{textToDisplay}</TextLoader>
  70             </div>
  71             {isDrawerApp && (
  72                 <div className="header pl-4 flex justify-end items-center">
  73                     <Tooltip title={c('Action').t`Close`}>
  74                         <Button icon color="weak" shape="ghost" onClick={handleCloseIFrame}>
  75                             <Icon name="cross-big" size={4} />
  76                         </Button>
  77                     </Tooltip>
  78                 </div>
  79             )}
  80         </div>
  81     );
  82 };
  83
  84 export default LoaderPage;