betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

Lazy import search module

pull/2869/head
Jérémy Rialland 2023-09-28 12:54:19 +02:00 committed by Johan Girod
parent 56ae3da2fb
commit 1d435353c0
2 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
site/source/components/SearchButton.tsx
View File

@ -1,10 +1,14 @@
import { lazy, Suspense } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { styled } from 'styled-components'
import { PopoverWithTrigger } from '@/design-system'
import { Button } from '@/design-system/buttons'
import { Loader } from '@/design-system/icons/Loader'
import SearchRulesAndSimulators from './search/SearchRulesAndSimulators'
const LazySearchRulesAndSimulators = lazy(
() => import('./search/SearchRulesAndSimulators')
)
export default function SearchButton() {
const { t } = useTranslation()
@ -44,7 +48,15 @@ export default function SearchButton() {
)}
>
{(closePopover) => (
<SearchRulesAndSimulators closePopover={closePopover} />
<Suspense
fallback={
<Container style={{ height: '300px', alignItems: 'center' }}>
<Loader />
</Container>
}
>
<LazySearchRulesAndSimulators closePopover={closePopover} />
</Suspense>
)}
</PopoverWithTrigger>
)
@ -60,3 +72,8 @@ const StyledIcon = styled.svg`
height: ${({ theme }) => theme.spacings.md};
margin-right: ${({ theme }) => theme.spacings.xs};
`
const Container = styled.div`
display: flex;
justify-content: center;
`

21
site/source/pages/Documentation.tsx
View File

@ -1,7 +1,7 @@
import rules, { DottedName } from 'modele-social'
import Engine from 'publicodes'
import { getDocumentationSiteMap, RulePage } from 'publicodes-react'
import { ComponentProps, useMemo, useRef } from 'react'
import { ComponentProps, lazy, Suspense, useMemo, useRef } from 'react'
import { Helmet } from 'react-helmet-async'
import { Trans, useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
@ -15,13 +15,13 @@ import {
import { styled } from 'styled-components'
import { References } from '@/components/References'
import SearchRules from '@/components/search/SearchRules'
import { FromBottom } from '@/components/ui/animate'
import { Markdown } from '@/components/utils/markdown'
import Meta from '@/components/utils/Meta'
import { ScrollToTop } from '@/components/utils/Scroll'
import { Accordion, Item } from '@/design-system'
import { Button } from '@/design-system/buttons'
import { Loader } from '@/design-system/icons/Loader'
import { Spacing } from '@/design-system/layout'
import { H1, H2, H3, H4, H5 } from '@/design-system/typography/heading'
import { Link, StyledLink } from '@/design-system/typography/link'
@ -33,6 +33,8 @@ import { RootState } from '@/store/reducers/rootReducer'
import { TrackPage } from '../components/ATInternetTracking'
import RuleLink from '../components/RuleLink'
const LazySearchRules = lazy(() => import('@/components/search/SearchRules'))
export default function Documentation({
documentationPath,
engine,
@ -187,11 +189,24 @@ function DocumentationLanding() {
<Trans i18nKey="pages.documentation.title">Documentation</Trans>
</H1>
<Body>Explorez toutes les règles de la documentation</Body>
<SearchRules />
<Suspense
fallback={
<Container style={{ height: '300px', alignItems: 'center' }}>
<Loader />
</Container>
}
>
<LazySearchRules />
</Suspense>
</>
)
}
const Container = styled.div`
display: flex;
justify-content: center;
`
function DocumentationRulesList() {
const ruleEntries = Object.keys(rules) as DottedName[]