Merge pull request #121 from tiqi-group/feat/add_async_method_status_spinner

Feat: adds async method status spinner
2026-06-08 02:08:47 +02:00 · 2024-04-22 17:49:58 +02:00
parent 503240aeae 9cfcb1ba0c
commit 2b8e25f5f1
7 changed files with 20 additions and 11 deletions
@@ -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>
@@ -1,13 +1,13 @@
 {
  "files": {
    "main.css": "/static/css/main.7ef670d5.css",
-    "main.js": "/static/js/main.27a065cb.js",
+    "main.js": "/static/js/main.53be4eb9.js",
    "index.html": "/index.html",
    "main.7ef670d5.css.map": "/static/css/main.7ef670d5.css.map",
-    "main.27a065cb.js.map": "/static/js/main.27a065cb.js.map"
+    "main.53be4eb9.js.map": "/static/js/main.53be4eb9.js.map"
  },
  "entrypoints": [
    "static/css/main.7ef670d5.css",
-    "static/js/main.27a065cb.js"
+    "static/js/main.53be4eb9.js"
  ]
 }
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.27a065cb.js"></script><link href="/static/css/main.7ef670d5.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.53be4eb9.js"></script><link href="/static/css/main.7ef670d5.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>