From 48f15f409b8ba91bff66424fe5f88a4c0b040c8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Sat, 21 Sep 2024 08:48:44 +0100
Subject: [PATCH] feat: Add loading spinner to search bar

---
 .../components/Sidebar/Search/index.tsx       | 49 ++++++++++++++-----
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.tsx
index 80735240a0..55f2be6f38 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.tsx
@@ -1,11 +1,12 @@
 import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
 import Container from "@mui/material/Container";
 import Typography from "@mui/material/Typography";
 import { useFormik } from "formik";
 import { useSearch } from "hooks/useSearch";
 import { debounce } from "lodash";
 import { useStore } from "pages/FlowEditor/lib/store";
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import ChecklistItem from "ui/shared/ChecklistItem";
 import Input from "ui/shared/Input";
 
@@ -25,6 +26,8 @@ const Search: React.FC = () => {
     state.orderedFlow,
     state.setOrderedFlow,
   ]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [lastSearchedTerm, setLastSearchedTerm] = useState("");
 
   useEffect(() => {
     if (!orderedFlow) setOrderedFlow();
@@ -46,11 +49,19 @@ const Search: React.FC = () => {
     () =>
       debounce((pattern: string) => {
         console.debug("Search term: ", pattern);
-        return search(pattern);
+        search(pattern);
+        setLastSearchedTerm(pattern);
+        setIsSearching(false);
       }, DEBOUNCE_MS),
     [search],
   );
 
+  useEffect(() => {
+    if (formik.values.pattern !== lastSearchedTerm) {
+      setIsSearching(true);
+    }
+  }, [formik.values.pattern, lastSearchedTerm]);
+
   return (
     <Container component={Box} p={3}>
       <form onSubmit={formik.handleSubmit}>
@@ -63,16 +74,30 @@ const Search: React.FC = () => {
         >
           Search this flow and internal portals
         </Typography>
-        <Input
-          id="pattern"
-          name="pattern"
-          value={formik.values.pattern}
-          onChange={(e) => {
-            formik.setFieldValue("pattern", e.target.value);
-            formik.handleSubmit();
-          }}
-          inputProps={{ spellCheck: false }}
-        />
+        <Box
+          sx={{ display: "flex", position: "relative", alignItems: "center" }}
+        >
+          <Input
+            id="pattern"
+            name="pattern"
+            value={formik.values.pattern}
+            onChange={(e) => {
+              formik.setFieldValue("pattern", e.target.value);
+              formik.handleSubmit();
+            }}
+            inputProps={{ spellCheck: false }}
+          />
+          {isSearching && (
+            <CircularProgress
+              size={25}
+              sx={(theme) => ({
+                position: "absolute",
+                right: theme.spacing(1.5),
+                zIndex: 1,
+              })}
+            />
+          )}
+        </Box>
         <ChecklistItem
           label="Search only data fields"
           id={"search-data-field-facet"}