From 37c310cae63fa9ad0007d2f7bdc703fc49dd0bb1 Mon Sep 17 00:00:00 2001
From: Ian Jones <51156018+ianjon3s@users.noreply.github.com>
Date: Fri, 17 May 2024 10:57:44 +0100
Subject: [PATCH] feat: Inline loading indicator for address lookup (#3136)

---
 .../components/FindProperty/Public/index.tsx  | 31 +++++++++++++++----
 .../components/DelayedLoadingIndicator.tsx    | 17 ++++++++--
 2 files changed, 39 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..41da7e874c 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,21 @@ export const FETCH_BLPU_CODES = gql`
 
 type Props = PublicProps<FindProperty>;
 
+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,
+    "& > div": {
+      justifyContent: "flex-start",
+      paddingLeft: theme.spacing(16),
+    },
+  },
+}));
+
 export default Component;
 
 function Component(props: Props) {
@@ -236,12 +252,15 @@ function Component(props: Props) {
               </Link>
             </Box>
           )}
-          {Boolean(address) && isValidating && (
-            <DelayedLoadingIndicator
-              msDelayBeforeVisible={50}
-              text="Fetching data..."
-            />
-          )}
+          <AddressLoadingWrap>
+            {Boolean(address) && isValidating && (
+              <DelayedLoadingIndicator
+                msDelayBeforeVisible={50}
+                text="Fetching address data..."
+                inline
+              />
+            )}
+          </AddressLoadingWrap>
         </>
       );
     }
diff --git a/editor.planx.uk/src/components/DelayedLoadingIndicator.tsx b/editor.planx.uk/src/components/DelayedLoadingIndicator.tsx
index d09f68b9f3..a14ffca721 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",
+})<Props>(({ inline, theme }) => ({
   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}
     >
-      <CircularProgress aria-label="Loading" />
+      <CircularProgress size={inline ? 30 : 40} aria-label="Loading" />
       <Typography variant="body2" sx={{ ml: "1rem" }}>
         {text ?? "Loading..."}
       </Typography>