diff --git a/frontend/src/components/PasswordCreationDoubleInput.tsx b/frontend/src/components/PasswordCreationDoubleInput.tsx index 6adc0bc1..c6c72d71 100644 --- a/frontend/src/components/PasswordCreationDoubleInput.tsx +++ b/frontend/src/components/PasswordCreationDoubleInput.tsx @@ -16,11 +16,8 @@ import { Form, Progress } from "@vector-im/compound-web"; import { useDeferredValue, useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; -import { FragmentType, graphql, useFragment } from "../gql"; -import { - PasswordComplexity, - estimatePasswordComplexity, -} from "../utils/password_complexity"; +import { type FragmentType, graphql, useFragment } from "../gql"; +import type { PasswordComplexity } from "../utils/password_complexity"; const CONFIG_FRAGMENT = graphql(/* GraphQL */ ` fragment PasswordCreationDoubleInput_siteConfig on SiteConfig { @@ -29,6 +26,10 @@ const CONFIG_FRAGMENT = graphql(/* GraphQL */ ` } `); +// This will load the password complexity module lazily, +// so that it doesn't block the initial render and can be code-split +const loadPromise = import("../utils/password_complexity"); + const usePasswordComplexity = (password: string): PasswordComplexity => { const { t } = useTranslation(); const [result, setResult] = useState({ @@ -46,9 +47,11 @@ const usePasswordComplexity = (password: string): PasswordComplexity => { improvementsText: [], }); } else { - estimatePasswordComplexity(deferredPassword, t).then((response) => - setResult(response), - ); + loadPromise + .then(({ estimatePasswordComplexity }) => + estimatePasswordComplexity(deferredPassword, t), + ) + .then((response) => setResult(response)); } }, [deferredPassword, t]);