github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-25 03:06:31 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(intro): use AsyncLoadingBoundary

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-10-07 23:34:36 +02:00
parent ba96f07374
commit 6d580a0eee
1 changed files with 21 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,35 +4,37 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { useEffect, useState } from 'react'
import { WaitSpinner } from '../common/wait-spinner/wait-spinner'
import React, { useEffect } from 'react'
import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
import { RendererType } from '../render-page/window-post-message-communicator/rendering-message'
import { useTranslation } from 'react-i18next'
import { fetchFrontPageContent } from './requests'
import { Logger } from '../../utils/logger'
import { useAsync } from 'react-use'
import { AsyncLoadingBoundary } from '../common/async-loading-boundary'
const logger = new Logger('Intro Content')
/**
* Fetches the content for the customizable part of the intro page and renders it.
*/
export const IntroCustomContent: React.FC = () => {
const { t } = useTranslation()
const [content, setContent] = useState<string[] | undefined>(undefined)
const { value, error, loading } = useAsync(async () => (await fetchFrontPageContent()).split('\n'), [])
useEffect(() => {
fetchFrontPageContent()
.then((content) => setContent(content.split('\n')))
.catch(() => setContent(undefined))
}, [t])
if (error) {
logger.error('Error while loading custom intro content', error)
}
}, [error])
return content === undefined ? (
<WaitSpinner />
) : (
<RenderIframe
frameClasses={'w-100 overflow-y-hidden'}
markdownContentLines={content}
rendererType={RendererType.INTRO}
forcedDarkMode={true}
adaptFrameHeightToContent={true}
/>
return (
<AsyncLoadingBoundary loading={loading} error={error} componentName={'custom intro content'}>
<RenderIframe
frameClasses={'w-100 overflow-y-hidden'}
markdownContentLines={value as string[]}
rendererType={RendererType.INTRO}
forcedDarkMode={true}
adaptFrameHeightToContent={true}
/>
</AsyncLoadingBoundary>
)
}