From 7ae1d5f76812b64a746eee74783e929154ce561c Mon Sep 17 00:00:00 2001
From: "Arslan, Erdem" <erdem.arslan@valtech.com>
Date: Sun, 21 Jan 2024 21:34:53 +0100
Subject: [PATCH] create loading spinner for the consumer button

---
 pkgs/ui/src/config/client_1/index.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx
index 0557c19..717a309 100644
--- a/pkgs/ui/src/config/client_1/index.tsx
+++ b/pkgs/ui/src/config/client_1/index.tsx
@@ -1,4 +1,5 @@
-import { Button, Tooltip } from "@mui/material";
+import {Button, CircularProgress, Tooltip} from "@mui/material";
+import {useState} from "react";
 
 export const ClientTableConfig = [
   {
@@ -13,18 +14,22 @@ export const ClientTableConfig = [
     key: "endpoint_url",
     label: "End Point",
     render: (value: any) => {
+      const [isLoading, setIsLoading] = useState(false);
       const onConsume = () => {
+        setIsLoading(true);
         fetch(value)
           .then((response) => {
+            setIsLoading(false)
             console.log(response);
           })
           .catch((error) => {
+            setIsLoading(false)
             console.log("Fetch error: ", error);
           });
       };
       return (
         <Button onClick={onConsume} variant="outlined">
-          Consume
+          {isLoading ? <CircularProgress size={20} /> : 'Consume'}
         </Button>
       );
     },