From 1d435353c0dc3480fb6b40bdee633ecb62e97ad4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= Date: Thu, 28 Sep 2023 12:54:19 +0200 Subject: [PATCH] Lazy import search module --- site/source/components/SearchButton.tsx | 21 +++++++++++++++++++-- site/source/pages/Documentation.tsx | 21 ++++++++++++++++++--- 2 files changed, 37 insertions(+), 5 deletions(-) diff --git a/site/source/components/SearchButton.tsx b/site/source/components/SearchButton.tsx index d960c17f1..f0375a5c0 100644 --- a/site/source/components/SearchButton.tsx +++ b/site/source/components/SearchButton.tsx @@ -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) => ( - + + + + } + > + + )} ) @@ -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; +` diff --git a/site/source/pages/Documentation.tsx b/site/source/pages/Documentation.tsx index 5a37c2d50..3e234beb7 100644 --- a/site/source/pages/Documentation.tsx +++ b/site/source/pages/Documentation.tsx @@ -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() { Documentation Explorez toutes les règles de la documentation - + + + + } + > + + ) } +const Container = styled.div` + display: flex; + justify-content: center; +` + function DocumentationRulesList() { const ruleEntries = Object.keys(rules) as DottedName[]