From 567c6a3894f145dad763b90cd770d354753ed44a Mon Sep 17 00:00:00 2001 From: mrjvs Date: Fri, 17 Nov 2023 19:20:17 +0100 Subject: [PATCH] Improve register loading screen --- src/pages/parts/auth/TrustBackendPart.tsx | 55 +++++++++++++---------- 1 file changed, 31 insertions(+), 24 deletions(-) diff --git a/src/pages/parts/auth/TrustBackendPart.tsx b/src/pages/parts/auth/TrustBackendPart.tsx index 62c7888b..86f80463 100644 --- a/src/pages/parts/auth/TrustBackendPart.tsx +++ b/src/pages/parts/auth/TrustBackendPart.tsx @@ -1,3 +1,5 @@ +import { useMemo } from "react"; +import { useHistory } from "react-router-dom"; import { useAsync } from "react-use"; import { MetaResponse, getBackendMeta } from "@/backend/accounts/meta"; @@ -8,6 +10,8 @@ import { LargeCardButtons, LargeCardText, } from "@/components/layout/LargeCard"; +import { Loading } from "@/components/layout/Loading"; +import { useBackendUrl } from "@/hooks/auth/useBackendUrl"; import { conf } from "@/setup/config"; interface TrustBackendPartProps { @@ -15,18 +19,30 @@ interface TrustBackendPartProps { } export function TrustBackendPart(props: TrustBackendPartProps) { - const result = useAsync(async () => { - const url = conf().BACKEND_URL; - return { - domain: new URL(url).hostname, - data: await getBackendMeta(conf().BACKEND_URL), - }; - }, []); + const history = useHistory(); + const backendUrl = useBackendUrl(); + const backendHostname = useMemo( + () => new URL(backendUrl).hostname, + [backendUrl] + ); + const result = useAsync(() => { + return getBackendMeta(conf().BACKEND_URL); + }, [backendUrl]); - if (result.loading) return

loading...

; - - if (result.error || !result.value) - return

Failed to talk to backend, did you configure it correctly?

; + let cardContent = ( + <> +

Failed to reach backend

+

Did you configure it correctly?

+ + ); + if (result.loading) cardContent = ; + if (result.value) + cardContent = ( + <> +

{result.value.name}

+ {result.value.description ?

{result.value.description}

: null} + + ); return ( @@ -34,29 +50,20 @@ export function TrustBackendPart(props: TrustBackendPartProps) { title="Do you trust this host?" icon={} > - Do you trust {result.value.domain}? + Do you trust {backendHostname}?
-

- {result.value.data.name} -

- {result.value.data.description ? ( -

{result.value.data.description}

- ) : null} + {cardContent}
-