From cf7ed69187220b790dac70ef443cb1363b712d2c Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Fri, 10 May 2024 14:42:24 +0100 Subject: [PATCH 1/3] feat: Inline loading indicator for address lookup --- .../components/FindProperty/Public/index.tsx | 28 +++++++++++++++---- .../components/DelayedLoadingIndicator.tsx | 17 +++++++++-- 2 files changed, 36 insertions(+), 9 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx b/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx index 10bdab7330..b4ece96f11 100644 --- a/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx +++ b/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx @@ -1,6 +1,7 @@ import { gql } from "@apollo/client"; import Box from "@mui/material/Box"; import Link from "@mui/material/Link"; +import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import Card from "@planx/components/shared/Preview/Card"; import QuestionHeader from "@planx/components/shared/Preview/QuestionHeader"; @@ -38,6 +39,18 @@ export const FETCH_BLPU_CODES = gql` type Props = PublicProps; +const AddressLoadingWrap = styled(Box)(({ theme }) => ({ + marginBottom: theme.spacing(-2.5), + minHeight: theme.spacing(3), + pointerEvents: "none", + [theme.breakpoints.up("md")]: { + position: "absolute", + bottom: theme.spacing(1), + margin: 0, + paddingRight: theme.spacing(14), + }, +})); + export default Component; function Component(props: Props) { @@ -236,12 +249,15 @@ function Component(props: Props) { )} - {Boolean(address) && isValidating && ( - - )} + + {Boolean(address) && isValidating && ( + + )} + ); } diff --git a/editor.planx.uk/src/components/DelayedLoadingIndicator.tsx b/editor.planx.uk/src/components/DelayedLoadingIndicator.tsx index d09f68b9f3..22074a899b 100644 --- a/editor.planx.uk/src/components/DelayedLoadingIndicator.tsx +++ b/editor.planx.uk/src/components/DelayedLoadingIndicator.tsx @@ -4,17 +4,27 @@ import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import React, { useEffect, useState } from "react"; -const Root = styled(Box)(() => ({ +export interface Props { + inline?: boolean; +} + +const Root = styled(Box, { + shouldForwardProp: (prop) => prop !== "inline", +})(({ inline }) => ({ padding: 60, display: "flex", alignItems: "center", justifyContent: "center", + ...(inline && { + padding: 0, + }), })); const DelayedLoadingIndicator: React.FC<{ msDelayBeforeVisible?: number; text?: string; -}> = ({ msDelayBeforeVisible = 0, text }) => { + inline?: boolean; +}> = ({ msDelayBeforeVisible = 0, text, inline }) => { const [visible, setVisible] = useState(false); useEffect(() => { @@ -30,8 +40,9 @@ const DelayedLoadingIndicator: React.FC<{ aria-busy="true" aria-live="assertive" data-testid="delayed-loading-indicator" + inline={inline} > - + {text ?? "Loading..."} From d60cd3bcd290c10bca61ce4d4d96bf6e8277c46e Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Fri, 17 May 2024 10:29:55 +0100 Subject: [PATCH 2/3] feat: Correct positioning for address loading indicator --- .../src/@planx/components/FindProperty/Public/index.tsx | 1 - editor.planx.uk/src/components/DelayedLoadingIndicator.tsx | 6 +++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx b/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx index b4ece96f11..d5bde2eee7 100644 --- a/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx +++ b/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx @@ -47,7 +47,6 @@ const AddressLoadingWrap = styled(Box)(({ theme }) => ({ position: "absolute", bottom: theme.spacing(1), margin: 0, - paddingRight: theme.spacing(14), }, })); diff --git a/editor.planx.uk/src/components/DelayedLoadingIndicator.tsx b/editor.planx.uk/src/components/DelayedLoadingIndicator.tsx index 22074a899b..22d87e774c 100644 --- a/editor.planx.uk/src/components/DelayedLoadingIndicator.tsx +++ b/editor.planx.uk/src/components/DelayedLoadingIndicator.tsx @@ -10,13 +10,17 @@ export interface Props { const Root = styled(Box, { shouldForwardProp: (prop) => prop !== "inline", -})(({ inline }) => ({ +})(({ inline, theme }) => ({ padding: 60, display: "flex", alignItems: "center", justifyContent: "center", ...(inline && { padding: 0, + [theme.breakpoints.up("md")]: { + justifyContent: "flex-start", + paddingLeft: theme.spacing(16), + }, }), })); From c311bc17b10458a12b1eba82ee1cf35d20b7e6ea Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Fri, 17 May 2024 10:41:26 +0100 Subject: [PATCH 3/3] fix: Move page specific styles out of component --- .../src/@planx/components/FindProperty/Public/index.tsx | 4 ++++ editor.planx.uk/src/components/DelayedLoadingIndicator.tsx | 4 ---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx b/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx index d5bde2eee7..41da7e874c 100644 --- a/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx +++ b/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx @@ -47,6 +47,10 @@ const AddressLoadingWrap = styled(Box)(({ theme }) => ({ position: "absolute", bottom: theme.spacing(1), margin: 0, + "& > div": { + justifyContent: "flex-start", + paddingLeft: theme.spacing(16), + }, }, })); diff --git a/editor.planx.uk/src/components/DelayedLoadingIndicator.tsx b/editor.planx.uk/src/components/DelayedLoadingIndicator.tsx index 22d87e774c..a14ffca721 100644 --- a/editor.planx.uk/src/components/DelayedLoadingIndicator.tsx +++ b/editor.planx.uk/src/components/DelayedLoadingIndicator.tsx @@ -17,10 +17,6 @@ const Root = styled(Box, { justifyContent: "center", ...(inline && { padding: 0, - [theme.breakpoints.up("md")]: { - justifyContent: "flex-start", - paddingLeft: theme.spacing(16), - }, }), }));