Move markdown split into redux (#1681)

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

src/components/intro-page/hooks/use-intro-page-content.ts

@@ -9,14 +9,14 @@ import { useTranslation } from 'react-i18next'
 import { fetchFrontPageContent } from '../requests'
 import { useCustomizeAssetsUrl } from '../../../hooks/common/use-customize-assets-url'
 
-export const useIntroPageContent = (): string | undefined => {
+export const useIntroPageContent = (): string[] | undefined => {
   const { t } = useTranslation()
-  const [content, setContent] = useState<string | undefined>(undefined)
+  const [content, setContent] = useState<string[] | undefined>(undefined)
   const customizeAssetsUrl = useCustomizeAssetsUrl()
 
   useEffect(() => {
     fetchFrontPageContent(customizeAssetsUrl)
-      .then((content) => setContent(content))
+      .then((content) => setContent(content.split('\n')))
       .catch(() => setContent(undefined))
   }, [customizeAssetsUrl, t])
 

src/components/intro-page/intro-page.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Trans } from 'react-i18next'
 import { Branding } from '../common/branding/branding'
 import {
@@ -16,7 +16,6 @@ import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
 import { CoverButtons } from './cover-buttons/cover-buttons'
 import { FeatureLinks } from './feature-links'
 import { useIntroPageContent } from './hooks/use-intro-page-content'
-import { ShowIf } from '../common/show-if/show-if'
 import { RendererType } from '../render-page/window-post-message-communicator/rendering-message'
 import { WaitSpinner } from '../common/wait-spinner/wait-spinner'
 import { useApplicationState } from '../../hooks/common/use-application-state'
@@ -26,6 +25,25 @@ export const IntroPage: React.FC = () => {
   const introPageContent = useIntroPageContent()
   const rendererReady = useApplicationState((state) => state.rendererStatus.rendererReady)
 
+  const spinner = useMemo(() => {
+    if (!rendererReady && introPageContent !== undefined) {
+      return <WaitSpinner />
+    }
+  }, [introPageContent, rendererReady])
+
+  const introContent = useMemo(() => {
+    if (introPageContent !== undefined) {
+      return (
+        <RenderIframe
+          frameClasses={'w-100 overflow-y-hidden'}
+          markdownContentLines={introPageContent}
+          rendererType={RendererType.INTRO}
+          forcedDarkMode={true}
+        />
+      )
+    }
+  }, [introPageContent])
+
   return (
     <EditorToRendererCommunicatorContextProvider>
       <div className={'flex-fill mt-3'}>
@@ -39,17 +57,8 @@ export const IntroPage: React.FC = () => {
           <Branding delimiter={false} />
         </div>
         <CoverButtons />
-        <ShowIf condition={!rendererReady && introPageContent !== undefined}>
-          <WaitSpinner />
-        </ShowIf>
-        <ShowIf condition={!!introPageContent}>
-          <RenderIframe
-            frameClasses={'w-100 overflow-y-hidden'}
-            markdownContent={introPageContent as string}
-            rendererType={RendererType.INTRO}
-            forcedDarkMode={true}
-          />
-        </ShowIf>
+        {spinner}
+        {introContent}
         <hr className={'mb-5'} />
       </div>
       <FeatureLinks />