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

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

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

@@ -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])
 }

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

@@ -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'}>
+    <AsyncLoadingBoundary loading={loading || !value} error={error} componentName={'UserAvatarForUsername'}>
-      <UserAvatar user={value} {...props} />
+      <UserAvatar user={value as UserInfo} {...props} />
     </AsyncLoadingBoundary>
   )
 }

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

@@ -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>
   )

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

@@ -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 ?? ''}

frontend/src/components/intro-page/intro-custom-content.tsx

@@ -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[]}

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

@@ -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'} />

frontend/src/extensions/extra-integrations/flowchart/flowchart.tsx

@@ -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'} />

frontend/src/extensions/extra-integrations/graphviz/graphviz-frame.tsx

@@ -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>

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

@@ -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')}

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

@@ -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'} />

frontend/src/pages/new.tsx

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