From 776b662ad24fdabc7edfc404db673d0dc884c9b2 Mon Sep 17 00:00:00 2001
From: Kartik Gupta <84975264+kartik-gupta-ij@users.noreply.github.com>
Date: Fri, 4 Oct 2024 20:47:40 +0530
Subject: [PATCH] feat: Add loading state to RunButton in CodeBlock component
 (#237)

* feat: Add loading state to RunButton in CodeBlock component

* audited
---
 package-lock.json                             | 24 +++++++++----------
 src/components/Common/CodeBlock.jsx           | 20 +++++++++++-----
 .../MdxComponents/MdxCodeBlock.jsx            |  8 ++++++-
 3 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 80ad739d..851e1d24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7478,9 +7478,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "2.79.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
-      "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+      "version": "2.79.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
+      "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -8637,9 +8637,9 @@
       }
     },
     "node_modules/vite/node_modules/rollup": {
-      "version": "3.29.4",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
-      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
+      "version": "3.29.5",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz",
+      "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==",
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -13954,9 +13954,9 @@
       }
     },
     "rollup": {
-      "version": "2.79.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
-      "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+      "version": "2.79.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
+      "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "requires": {
         "fsevents": "~2.3.2"
       }
@@ -14568,9 +14568,9 @@
       },
       "dependencies": {
         "rollup": {
-          "version": "3.29.4",
-          "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
-          "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
+          "version": "3.29.5",
+          "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz",
+          "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==",
           "requires": {
             "fsevents": "~2.3.2"
           }
diff --git a/src/components/Common/CodeBlock.jsx b/src/components/Common/CodeBlock.jsx
index 5ed236dc..7456e658 100644
--- 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,10 +25,16 @@ 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>
   );
 };
@@ -36,6 +42,7 @@ export const RunButton = ({ code, onRun }) => {
 RunButton.propTypes = {
   code: PropTypes.string.isRequired,
   onRun: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
 };
 
 /**
@@ -43,7 +50,7 @@ RunButton.propTypes = {
  * @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
index 36cd0cac..5fe48d2c 100644
--- 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 = {