From a73e721b73d52eb07f23e180642c86ed4d4ffc65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mose=20M=C3=BCller?= <mosemueller@gmail.com>
Date: Mon, 22 Apr 2024 17:46:58 +0200
Subject: [PATCH] adds spinner to async task when waiting for backend status
 update

---
 frontend/src/components/AsyncMethodComponent.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/AsyncMethodComponent.tsx b/frontend/src/components/AsyncMethodComponent.tsx
index 07d382b..91e9c07 100644
--- a/frontend/src/components/AsyncMethodComponent.tsx
+++ b/frontend/src/components/AsyncMethodComponent.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { runMethod } from '../socket';
-import { Form, Button, InputGroup } from 'react-bootstrap';
+import { Form, Button, InputGroup, Spinner } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
 import { LevelName } from './NotificationsComponent';
 
@@ -32,6 +32,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
 
   const renderCount = useRef(0);
   const formRef = useRef(null);
+  const [spinning, setSpinning] = useState(false);
   const name = fullAccessPath.split('.').at(-1);
   const parentPath = fullAccessPath.slice(0, -(name.length + 1));
 
@@ -45,6 +46,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
       message = `${fullAccessPath} was started.`;
     }
     addNotification(message);
+    setSpinning(false);
   }, [props.value]);
 
   const execute = async (event: React.FormEvent) => {
@@ -58,6 +60,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
     }
 
     const accessPath = [parentPath, method_name].filter((element) => element).join('.');
+    setSpinning(true);
     runMethod(accessPath);
   };
 
@@ -73,7 +76,13 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
             <DocStringComponent docString={docString} />
           </InputGroup.Text>
           <Button id={`button-${id}`} type="submit">
-            {runningTask === 'RUNNING' ? 'Stop ' : 'Start '}
+            {spinning ? (
+              <Spinner size="sm" role="status" aria-hidden="true" />
+            ) : runningTask === 'RUNNING' ? (
+              'Stop '
+            ) : (
+              'Start '
+            )}
           </Button>
         </InputGroup>
       </Form>