feat: Inline loading indicator for address lookup

theopensystemslab · May 10, 2024 · 0c1f098 · 0c1f098
1 parent 420c3c9
commit 0c1f098
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 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
@@ -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";
@@ -33,6 +34,18 @@ 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,
+    paddingRight: theme.spacing(14),
+  },
+}));
+
 export default Component;
 
 function Component(props: Props) {
@@ -185,12 +198,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
@@ -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 }) => ({
   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>