From 289c1de76e0fbd64f8ab24726929d6f85a9399c8 Mon Sep 17 00:00:00 2001
From: Aditya <adityasahoo652@gmail.com>
Date: Thu, 30 Jan 2025 11:15:45 +0530
Subject: [PATCH] feat: add loading indicator to Selectable component

---
 .../src/app-components/inputs/Selectable.tsx  | 36 ++++++++++++++-----
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app-components/inputs/Selectable.tsx b/frontend/src/app-components/inputs/Selectable.tsx
index 62d8a6a6..1de31db6 100644
--- a/frontend/src/app-components/inputs/Selectable.tsx
+++ b/frontend/src/app-components/inputs/Selectable.tsx
@@ -1,12 +1,14 @@
-/*
- * Copyright © 2024 Hexastack. All rights reserved.
- *
- * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
- * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
- * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
- */
+/*
+ * Copyright © 2025 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
 
-import { Box, Input, styled } from "@mui/material";
+
+import { Box, CircularProgress, Input, styled } from "@mui/material";
 import randomSeed from "random-seed";
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
 
@@ -62,6 +64,7 @@ type SelectableProps = {
     text: string;
     entities: INlpDatasetKeywordEntity[];
   }) => void;
+  loading?: boolean;
 };
 
 const Selectable: FC<SelectableProps> = ({
@@ -70,6 +73,7 @@ const Selectable: FC<SelectableProps> = ({
   placeholder = "",
   onChange,
   onSelect,
+  loading,
 }) => {
   const [text, setText] = useState(defaultValue || "");
   const editableRef = useRef<HTMLDivElement>(null);
@@ -205,6 +209,22 @@ const Selectable: FC<SelectableProps> = ({
         onChange={(e) => handleTextChange(e.target.value)}
         placeholder={placeholder}
       />
+      {
+        loading && (
+          <CircularProgress
+            size={20}
+            thickness={5}
+            style={
+              {
+                position: "absolute", 
+                top: "30%", 
+                right: "5px", 
+                transform: "translateY(-30%)" 
+              }
+            }
+          />
+        )
+      }
     </SelectableBox>
   );
 };