Add code running UI

Inform users when code is running

Author: qiaoen17

Frontend/src/components/collab/CodeSpace.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Editor } from '@monaco-editor/react'
-import { Container, Stack } from 'react-bootstrap'
+import { Container, Stack, Spinner } from 'react-bootstrap'
 
-const CodeSpace = ({ handleEditorChange, code, language, output }) => {
+const CodeSpace = ({ handleEditorChange, loading, code, language, output }) => {
   return (
 
     <Stack gap={3} className='h-100'>
@@ -16,7 +16,14 @@ const CodeSpace = ({ handleEditorChange, code, language, output }) => {
         />
         <Container style={{ height: '200px', border: '1px solid #ccc', borderRadius: '0.5rem', padding: '1rem', backgroundColor: '#f8f9fa'}}>
             <h5>Output</h5>
-            <p style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap'}}>{output}</p>
+            {loading ? (
+              <div className="d-flex justify-content-center align-items-center" style={{ height: '100%' }}>
+                <Spinner animation="border" variant="primary" />
+                <span className="ms-1">Running...</span>
+              </div>
+            ): (
+              <p style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap'}}>{output}</p>
+            )}
         </Container>
     </Stack>
 

Frontend/src/components/collab/CollaborationSpace.jsx

@@ -25,6 +25,7 @@ const CollaborationSpace = () => {
     const [language, setLanguage] = useState("python") // set default language to python 
     const [output, setOutput] = useState("")
     const [messages, setMessages] = useState([])
+    const [outputLoading, setOutputLoading] = useState(false)
 
     // use https://emkc.org/api/v2/piston/runtimes to GET other languages
     const LANGUAGEVERSIONS = {
@@ -165,6 +166,9 @@ const CollaborationSpace = () => {
     };
 
     const handleCodeRun = () => {
+
+        setOutputLoading(true);
+
         const code_message = {
             "language": language,
             "files": [
@@ -177,6 +181,7 @@ const CollaborationSpace = () => {
 
         collabService.getCodeOutput(code_message)
             .then(result => {
+                setOutputLoading(false);
                 console.log(result.data.run.output)
                 setOutput(result.data.run.output)
             })
@@ -239,7 +244,7 @@ const CollaborationSpace = () => {
                     <Container fluid style={{ marginTop: '20px' }}>
                         <Row>
                             <Col md={8}>
-                                <CodeSpace handleEditorChange={handleEditorChange} code={code} language={language} output={output}/>
+                                <CodeSpace handleEditorChange={handleEditorChange} loading={outputLoading} code={code} language={language} output={output}/>
                             </Col>
                             <Col md={4}>
                                 <QuestionDisplay/>