Merge pull request #20 from orijtech/loading-bits

ui: improve ux by showing a spinner disabling further user inputs

Author: willpoint

ui/src/components/Spinner.tsx

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import CircularProgress from '@mui/material/CircularProgress';
+
+interface Props {
+  loading: boolean;
+};
+
+export const Spinner: FC<Props> = ({ loading }) => {
+    const styles: {[key: string]: number|string} = {
+        position: 'absolute',
+        top: '0%',
+        left: '0%',
+        right: '0%',
+        bottom: '0%',
+        visibility: 'hidden',
+        backgroundColor: '#ffffff00',
+        transition: 'background-color 200ms ease-in-out',
+        zIndex: -1,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+    };
+
+    if (loading) {
+        styles['visibility'] = 'visible';
+        styles['backgroundColor'] = '#ffffffd9';
+        styles['zIndex'] = 999;
+        styles['opacity'] = 0.5;
+    }
+    
+    return (
+        <div style={styles}>
+            <CircularProgress size={100} color='info' />
+        </div>
+    );
+};

ui/src/components/load-tester/LoadTester.tsx

@@ -3,19 +3,15 @@ import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Alert from '@mui/material/Alert';
 import Button from '@mui/material/Button';
-
-import {
-    LoadtestServiceClient,
-} from 'src/gen/orijtech/cosmosloadtester/v1/Loadtest_serviceServiceClientPb';
-import {
-    RunLoadtestRequest,
-    RunLoadtestResponse,
-} from 'src/gen/orijtech/cosmosloadtester/v1/loadtest_service_pb';
-
 import * as timestamp_pb from 'google-protobuf/google/protobuf/timestamp_pb';
 
+
+import { LoadtestServiceClient } from 'src/gen/orijtech/cosmosloadtester/v1/Loadtest_serviceServiceClientPb';
+import { RunLoadtestRequest, RunLoadtestResponse } from 'src/gen/orijtech/cosmosloadtester/v1/loadtest_service_pb';
+import { Spinner } from 'src/components/Spinner';
 import Inputs from 'src/components/inputs/Inputs';
 import Outputs from 'src/components/output/Outputs';
+
 import { fields } from './Fields';
 
 const service = new LoadtestServiceClient('');
@@ -52,7 +48,11 @@ export default function LoadTester() {
                 .setTransactionSizeBytes(data.transactionSizeBytes)
                 .setTransactionsPerSecond(data.transactionsPerSecond)
                 .setConnectionCount(data.connectionCount);
+
+            await (new Promise((resolve) => setTimeout(resolve, 3000)));
+            
             const result = await service.runLoadtest(request, null);
+
             setData(result.toObject());
             console.log(result.toObject());
         } catch (e: any) {
@@ -64,42 +64,45 @@ export default function LoadTester() {
     };
 
     return (
-        <Paper elevation={0} sx={{ mt: 3, p: 3 }}>
-            <Alert severity='info' sx={{ mb: 3 }} variant='standard'>
-                <Typography variant="caption">
-                    Enter TM Parameters
-                </Typography>
-            </Alert>
-            <Inputs
-                handleFormSubmission={onFormSubmit}
-                fields={fields}
-                submitRef={submitRef}
-            />
-            <Button
-                disableElevation={true}
-                disabled={running}
-                color={running ? 'inherit' : 'info'}
-                sx={{ textTransform: 'none' }}
-                variant='contained'
-                onClick={() => submitRef.current?.click()}
-            >
-                {running ? 'Running load testing...' : 'Run load testing'}
-            </Button>
+        <>
+            <Spinner loading={running} />
+            <Paper elevation={0} sx={{ mt: 3, p: 3 }}>
+                <Alert severity='info' sx={{ mb: 3 }} variant='standard'>
+                    <Typography variant="caption">
+                        Enter TM Parameters
+                    </Typography>
+                </Alert>
+                <Inputs
+                    handleFormSubmission={onFormSubmit}
+                    fields={fields}
+                    submitRef={submitRef}
+                />
+                <Button
+                    disableElevation={true}
+                    disabled={running}
+                    color={running ? 'inherit' : 'info'}
+                    sx={{ textTransform: 'none' }}
+                    variant='contained'
+                    onClick={() => submitRef.current?.click()}
+                >
+                    {running ? 'Running load testing...' : 'Run load testing'}
+                </Button>
 
-            {/* display errors if any occured */}
-            {error !== '' && <Typography component='h6' variant='caption'>{error}</Typography>}
-            {/* render data if it exists */}
-            {
-                data !== undefined &&
-                <>
-                    <Alert severity='success' sx={{ my: 3 }}>
-                        <Typography variant='caption'>
-                            Load Testing Results
-                        </Typography>
-                    </Alert>
-                    <Outputs data={data} />
-                </>
-            }
-        </Paper>
+                {/* display errors if any occured */}
+                {error !== '' && <Typography component='h6' variant='caption'>{error}</Typography>}
+                {/* render data if it exists */}
+                {
+                    data !== undefined &&
+                    <>
+                        <Alert severity='success' sx={{ my: 3 }}>
+                            <Typography variant='caption'>
+                                Load Testing Results
+                            </Typography>
+                        </Alert>
+                        <Outputs data={data} />
+                    </>
+                }
+            </Paper>
+        </>
     );
 }