Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add error boundary to system Modal. For #2811

Browse Source
This commit is contained in:
Gabe Kangas 2023-03-12 23:09:06 -07:00
parent 02ca54d810
commit 9162386495
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
1 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/components/ui/Modal/Modal.tsx
View File

@ -1,5 +1,7 @@
import { Spin, Skeleton, Modal as AntModal } from 'antd';
import React, { FC, ReactNode, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { ComponentError } from '../ComponentError/ComponentError';
import styles from './Modal.module.scss';
export type ModalProps = {
@ -71,15 +73,26 @@ export const Modal: FC<ModalProps> = ({
centered
destroyOnClose
>
<div id="modal-container" style={{ height: '100%' }}>
{loading && (
<Skeleton active={loading} style={{ padding: '10px' }} paragraph={{ rows: 10 }} />
<ErrorBoundary
// eslint-disable-next-line react/no-unstable-nested-components
fallbackRender={({ error, resetErrorBoundary }) => (
<ComponentError
componentName="Modal"
message={error.message}
retryFunction={resetErrorBoundary}
/>
)}
>
<div id="modal-container" style={{ height: '100%' }}>
{loading && (
<Skeleton active={loading} style={{ padding: '10px' }} paragraph={{ rows: 10 }} />
)}
{iframe && <div style={{ display: iframeDisplayStyle }}>{iframe}</div>}
{children && <div className={styles.content}>{children}</div>}
{loading && <Spin className={styles.spinner} spinning={loading} size="large" />}
</div>
{iframe && <div style={{ display: iframeDisplayStyle }}>{iframe}</div>}
{children && <div className={styles.content}>{children}</div>}
{loading && <Spin className={styles.spinner} spinning={loading} size="large" />}
</div>
</ErrorBoundary>
</AntModal>
);
};