github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-24 18:56:32 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(async-loading): show async loaded components only if value is present

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-12-29 12:27:38 +01:00
parent 26c1f1bcaa
commit caf212045a
11 changed files with 13 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/components/common/note-loading-boundary/hooks/use-load-note-from-server.ts
View file

@ -14,7 +14,7 @@ import type { AsyncState } from 'react-use/lib/useAsyncFn'
*
* @return An {@link AsyncState async state} that represents the current state of the loading process.
*/
export const useLoadNoteFromServer = (): [AsyncState<void>, () => void] => {
export const useLoadNoteFromServer = (): [AsyncState<boolean>, () => void] => {
const id = useSingleStringUrlParameter('noteId', undefined)
return useAsyncFn(async () => {
@ -23,5 +23,6 @@ export const useLoadNoteFromServer = (): [AsyncState<void>, () => void] => {
}
const noteFromServer = await getNote(id)
setNoteDataFromServer(noteFromServer)
return true
}, [id])
}

8
frontend/src/components/common/user-avatar/user-avatar-for-username.tsx
View file

@ -38,13 +38,9 @@ export const UserAvatarForUsername: React.FC<UserAvatarForUsernameProps> = ({ us
}
}, [username, t])
if (!value) {
return null
}
return (
<AsyncLoadingBoundary loading={loading} error={error} componentName={'UserAvatarForUsername'}>
<UserAvatar user={value} {...props} />
<AsyncLoadingBoundary loading={loading || !value} error={error} componentName={'UserAvatarForUsername'}>
<UserAvatar user={value as UserInfo} {...props} />
</AsyncLoadingBoundary>
)
}

2
frontend/src/components/editor-page/document-bar/revisions/revision-list.tsx
View file

@ -55,7 +55,7 @@ export const RevisionList: React.FC<RevisionListProps> = ({ selectedRevisionId,
}, [loading, onRevisionSelect, revisions, selectedRevisionId])
return (
<AsyncLoadingBoundary loading={loading} error={error} componentName={'revision list'}>
<AsyncLoadingBoundary loading={loading || !revisions} error={error} componentName={'revision list'}>
<ListGroup>{revisionList}</ListGroup>
</AsyncLoadingBoundary>
)

2
frontend/src/components/editor-page/document-bar/revisions/revision-viewer.tsx
View file

@ -51,7 +51,7 @@ export const RevisionViewer: React.FC<RevisionViewerProps> = ({ selectedRevision
}
return (
<AsyncLoadingBoundary loading={loading} componentName={'RevisionViewer'} error={error}>
<AsyncLoadingBoundary loading={loading || !value} componentName={'RevisionViewer'} error={error}>
<ReactDiffViewer
oldValue={previousRevisionContent ?? ''}
newValue={value?.content ?? ''}

2
frontend/src/components/intro-page/intro-custom-content.tsx
View file

@ -26,7 +26,7 @@ export const IntroCustomContent: React.FC = () => {
}, [error])
return (
<AsyncLoadingBoundary loading={loading} error={error} componentName={'custom intro content'}>
<AsyncLoadingBoundary loading={loading || !value} error={error} componentName={'custom intro content'}>
<RenderIframe
frameClasses={'w-100 overflow-y-hidden'}
markdownContentLines={value as string[]}

2
frontend/src/extensions/extra-integrations/abcjs/abc-frame.tsx
View file

@ -49,7 +49,7 @@ export const AbcFrame: React.FC<CodeProps> = ({ code }) => {
}, [code, abcLib])
return (
<AsyncLoadingBoundary loading={loading} error={!!loadingError} componentName={'abc.js'}>
<AsyncLoadingBoundary loading={loading || !abcLib} error={!!loadingError} componentName={'abc.js'}>
<ShowIf condition={!!renderError}>
<Alert variant={'danger'}>
<Trans i18nKey={'editor.embeddings.abcJs.errorWhileRendering'} />

2
frontend/src/extensions/extra-integrations/flowchart/flowchart.tsx
View file

@ -70,7 +70,7 @@ export const FlowChart: React.FC<CodeProps> = ({ code }) => {
}, [code, darkModeActivated, flowchartLib])
return (
<AsyncLoadingBoundary loading={loading} componentName={'flowchart.js'} error={!!libLoadingError}>
<AsyncLoadingBoundary loading={loading || !flowchartLib} componentName={'flowchart.js'} error={!!libLoadingError}>
<ShowIf condition={syntaxError}>
<Alert variant={'danger'}>
<Trans i18nKey={'renderer.flowchart.invalidSyntax'} />

2
frontend/src/extensions/extra-integrations/graphviz/graphviz-frame.tsx
View file

@ -61,7 +61,7 @@ export const GraphvizFrame: React.FC<CodeProps> = ({ code }) => {
}, [code, basePath, showError, graphvizImport])
return (
<AsyncLoadingBoundary loading={isLibLoading} componentName={'graphviz'} error={libLoadingError}>
<AsyncLoadingBoundary loading={isLibLoading || !graphvizImport} componentName={'graphviz'} error={libLoadingError}>
<ShowIf condition={!!error}>
<Alert variant={'warning'}>{error}</Alert>
</ShowIf>

2
frontend/src/extensions/extra-integrations/highlighted-code-fence/highlighted-code.tsx
View file

@ -36,7 +36,7 @@ export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language
const wrappedDomLines = useAttachLineNumbers(codeDom, startLineNumber)
return (
<AsyncLoadingBoundary loading={loading} error={!!error} componentName={'highlight.js'}>
<AsyncLoadingBoundary loading={loading || !hljsApi} error={!!error} componentName={'highlight.js'}>
<div className={styles['code-highlighter']} {...cypressId('highlighted-code-block')}>
<code
{...testId('code-highlighter')}

2
frontend/src/extensions/extra-integrations/vega-lite/vega-lite-chart.tsx
View file

@ -58,7 +58,7 @@ export const VegaLiteChart: React.FC<CodeProps> = ({ code }) => {
}, [renderingError])
return (
<AsyncLoadingBoundary loading={libLoading} error={libLoadingError} componentName={'Vega Lite'}>
<AsyncLoadingBoundary loading={libLoading || !vegaEmbed} error={libLoadingError} componentName={'Vega Lite'}>
<ShowIf condition={!!renderingError}>
<Alert variant={'danger'}>
<Trans i18nKey={'renderer.vega-lite.errorJson'} />

2
frontend/src/pages/new.tsx
View file

@ -24,7 +24,7 @@ export const NewNotePage: NextPage = () => {
return (
<CustomAsyncLoadingBoundary
loading={loading}
loading={loading || !value}
error={error}
loadingComponent={<LoadingScreen />}
errorComponent={