feat: Add loading state to RunButton in CodeBlock component (#237)

* feat: Add loading state to RunButton in CodeBlock component * audited
qdrant · Oct 4, 2024 · 776b662 · 776b662
1 parent 4827e5d
commit 776b662
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Common/CodeBlock.jsx b/src/components/Common/CodeBlock.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Highlight, Prism, themes } from 'prism-react-renderer';
 import Editor from 'react-simple-code-editor';
-import { alpha, Box, Button } from '@mui/material';
+import { alpha, Box, Button, CircularProgress } from '@mui/material';
 import { styled, useTheme } from '@mui/material/styles';
 import { PlayArrowOutlined } from '@mui/icons-material';
 import { CopyButton } from './CopyButton';
@@ -25,25 +25,32 @@ const StyledEditor = styled((props) => <Editor padding={0} textareaClassName={'c
  * @return {JSX.Element}
  * @constructor
  */
-export const RunButton = ({ code, onRun }) => {
+export const RunButton = ({ code, onRun, loading }) => {
   return (
-    <Button variant="outlined" endIcon={<PlayArrowOutlined />} onClick={() => onRun(code)} data-testid="code-block-run">
-      Run
+    <Button
+      variant="outlined"
+      endIcon={loading ? <CircularProgress size={24} color="inherit" /> : <PlayArrowOutlined />}
+      onClick={() => onRun(code)}
+      disabled={loading}
+      data-testid="code-block-run"
+    >
+      {loading ? 'Running...' : 'Run'}
     </Button>
   );
 };
 
 RunButton.propTypes = {
   code: PropTypes.string.isRequired,
   onRun: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
 };
 
 /**
  * Code block with syntax highlighting
  * @return {JSX.Element}
  * @constructor
  */
-export const CodeBlock = ({ codeStr, language, withRunButton, onRun, title, editable = true }) => {
+export const CodeBlock = ({ codeStr, language, withRunButton, onRun, title, editable = true, loading }) => {
   const [code, setCode] = useState(codeStr);
   const theme = useTheme();
   const prismTheme = theme.palette.mode === 'light' ? themes.nightOwlLight : themes.vsDark;
@@ -102,7 +109,7 @@ export const CodeBlock = ({ codeStr, language, withRunButton, onRun, title, edit
       >
         {withRunButton && onRun && (
           <Box sx={{ flexGrow: '1' }}>
-            <RunButton code={code} onRun={onRun} />
+            <RunButton code={code} onRun={onRun} loading={loading} />
           </Box>
         )}
         {title && <Box>{title}</Box>}
@@ -131,4 +138,5 @@ CodeBlock.propTypes = {
   onRun: PropTypes.func,
   title: PropTypes.string,
   editable: PropTypes.bool, // by default code block is editable
+  loading: PropTypes.bool,
 };
diff --git a/src/components/InteractiveTutorial/MdxComponents/MdxCodeBlock.jsx b/src/components/InteractiveTutorial/MdxComponents/MdxCodeBlock.jsx
@@ -17,19 +17,25 @@ export const MdxCodeBlock = ({ children }) => {
   const language = className.replace(/language-/, '');
   const withRunButton = children.props.withRunButton && bigIntJSON.parse(children.props.withRunButton);
   const { setResult } = useTutorial();
+  const [loading, setLoading] = React.useState(false);
 
   const handleRun = (code) => {
+    setLoading(true);
     setResult('{}');
     requestFromCode(code, false)
       .then((res) => {
         setResult(() => bigIntJSON.stringify(res));
+        setLoading(false);
       })
       .catch((err) => {
         setResult(() => bigIntJSON.stringify(err));
+        setLoading(false);
       });
   };
 
-  return <CodeBlock codeStr={code} language={language} withRunButton={withRunButton} onRun={handleRun} />;
+  return (
+    <CodeBlock codeStr={code} language={language} withRunButton={withRunButton} onRun={handleRun} loading={loading} />
+  );
 };
 
 MdxCodeBlock.propTypes = {