Add note loading boundary (#2040)

* Remove redundant equal value

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Add NoteLoadingBoundary to fetch note from API before rendering

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Improve debug message for setHandler

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Add test for boundary

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Use common error page for note loading errors

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Fix tests

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Format code

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Add missing snapshot

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Reformat code

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-05-11 12:47:58 +02:00 committed by GitHub
parent 0419113d36
commit 880e542351
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 282 additions and 166 deletions

View file

@ -4,6 +4,7 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { ReactElement } from 'react'
import React from 'react'
import { Alert } from 'react-bootstrap'
import { LoadingAnimation } from './loading-animation'
@ -11,7 +12,7 @@ import { ShowIf } from '../../common/show-if/show-if'
import styles from '../application-loader.module.scss'
export interface LoadingScreenProps {
failedTaskName?: string
errorMessage?: string | ReactElement
}
/**
@ -19,20 +20,16 @@ export interface LoadingScreenProps {
*
* @param failedTaskName Should be set if a task failed to load. The name will be shown on screen.
*/
export const LoadingScreen: React.FC<LoadingScreenProps> = ({ failedTaskName }) => {
export const LoadingScreen: React.FC<LoadingScreenProps> = ({ errorMessage }) => {
return (
<div className={`${styles.loader} ${styles.middle} text-light overflow-hidden`}>
<div className='mb-3 text-light'>
<span className={`d-block`}>
<LoadingAnimation error={!!failedTaskName} />
<LoadingAnimation error={!!errorMessage} />
</span>
</div>
<ShowIf condition={!!failedTaskName}>
<Alert variant={'danger'}>
The task {failedTaskName} failed.
<br />
For further information look into the browser console.
</Alert>
<ShowIf condition={!!errorMessage}>
<Alert variant={'danger'}>{errorMessage}</Alert>
</ShowIf>
</div>
)