github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-02-27 05:30:59 +00: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

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

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